@charset "utf-8";
/* CSS Document */
body{margin:0; padding:0; font:12px Arial,"microsoft yahei"; color:#333; background:#fff;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0; }
ul,li,ol{list-style:none;}
a{text-decoration:none; color:#333;}
a:hover{text-decoration:none; color:#412525;}
input,textarea,select,button{  font-family:Arial,"Microsoft YaHei"; }
input:focus,textarea:focus,select:focus,button:focus{ outline:none;}
::-moz-selection {background:#333;color:#FFF;}
::selection {background: #333;color: #FFF;}
img{border:0}
.clear { zoom: 1;clear:both; }
.clear:after { content: ''; display: block; clear: both; }

@font-face {font-family:'PoiretOne'; src: url('../fonts/PoiretOne.ttf') format('truetype'); }
@font-face {font-family:'verdana'; src: url('../fonts/verdana.ttf') format('truetype'); }
@font-face {font-family:'Agency'; src: url('../fonts/Agency.ttf') format('truetype'); }

.fl{ float:left;}
.fr{ float:right;}
.c1440{ width:90rem; margin:0 auto; min-width:90rem;}
.m1440{ min-width: 90rem;}

.chevron{-webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; position:absolute; bottom:3%; left:50%; margin-left:-15px; display: block; z-index:999}
@-webkit-keyframes pulse{0%{-webkit-transform: translate(0, 0); transform: translate(0, 0);} 50%{-webkit-transform: translate(0, 10px); transform: translate(0, 10px);} 100%{-webkit-transform: translate(0, 0); transform: translate(0, 0);} }
@keyframes pulse{0%{-webkit-transform: translate(0, 0); transform: translate(0, 0);} 50%{-webkit-transform: translate(0, 10px); transform: translate(0, 10px);} 100%{-webkit-transform: translate(0, 0); transform: translate(0, 0);} }

*[class*="rect-"]{position: relative;display: block; width: 100%;height: 0;overflow: hidden;}
*[class*="rect-"] ._full{position: absolute;left: 0;top:0;width: 100%;height: 100%;
*height: auto;object-fit: cover;}
.rect-40{padding-bottom: 40%;}
.rect-50{padding-bottom: 50%;}
.rect-55{padding-bottom: 55%;}
.rect-5625{padding-bottom: 56.25%;}
.rect-60{padding-bottom: 60%;}
.rect-65{padding-bottom: 65%;}
.rect-70{padding-bottom: 70%;}
.rect-75{padding-bottom: 75%;}
.rect-80{padding-bottom: 80%;}
.rect-90{padding-bottom: 90%;}
.rect-100{padding-bottom: 100%;}
.rect-135{padding-bottom: 135%;}
.rect-140{padding-bottom: 140%;}
.rect-150{padding-bottom: 150%;}

/* header */
.header{ margin:0; padding:0 ; width:100%; position:absolute; z-index:999; min-width:90rem;}
.headerLogo{ padding:0; margin: 25px 0 0 3.125%; width:155px; height:42px;}
.headerLogo a{ display:block; width:260px; height:40px; background:url(../images/indexLogo.png) no-repeat;}
.headerNav{ width: 24px; height: 24px; margin: 18px; position: relative; cursor: pointer;}
.headerNav p{ width: 100%; font-size: 12px; color: #333; margin-top: 8px; text-align: center;}
.NavIcon-open{ width: 24px; height: 24px;  cursor: pointer;  position: relative; z-index: 1000;  }
.NavIcon-open.active { display: none; }
.NavIcon-open i{ width: 4px; height: 4px; position: absolute; background-color: #333; transition: all 0.5s ease;}
.NavIcon-open1 i{ background-color: #fff;}
.NavIcon-open i.icon1{ top: 0; left: 0;}
.NavIcon-open i.icon2{ top: 0; left: 10px;}
.NavIcon-open i.icon3{ top: 0; left: 20px;}
.NavIcon-open i.icon4{ top: 10px; left: 0;}
.NavIcon-open i.icon5{ top: 10px; left: 10px;}
.NavIcon-open i.icon6{ top: 10px; left: 20px;}
.NavIcon-open i.icon7{ top: 20px; left: 0;}
.NavIcon-open i.icon8{ top: 20px; left: 10px;}
.NavIcon-open i.icon9{ top: 20px; left: 20px;}
.NavIcon-open:hover i.icon1{ top: 5px; left: 5px;}
.NavIcon-open:hover i.icon7{ top: 15px; left: 5px;}
.NavIcon-open:hover i.icon3{ top: 5px; left: 15px;}
.NavIcon-open:hover i.icon9{ top: 15px; left: 15px;}
.NavIcon-close{  width: 24px; height: 24px; position: relative; left: 44px; top: 44px; cursor: pointer; transition: 400ms; -webkit-transition: 400ms;}
.NavIcon-close { opacity: 0; transition: 0.4s 0s; -webkit-transition: 0.4s 0s; }
.open .NavIcon-close { opacity: 1; transition-delay: 400ms; -webkit-transition-delay: 400ms; }
.NavIcon-close i{ width: 4px; height: 4px; position: absolute; background-color: #ccc; transition: all 0.5s ease;}
.NavIcon-close i.icon1{ top: 0; left: 0;}
.NavIcon-close i.icon2{ top: 5px; left: 5px;}
.NavIcon-close i.icon3{ top: 0; left: 20px;}
.NavIcon-close i.icon4{ top: 15px; left: 5px;}
.NavIcon-close i.icon5{ top: 10px; left: 10px;}
.NavIcon-close i.icon6{ top: 5px; left: 15px;}
.NavIcon-close i.icon7{ top: 20px; left: 0;}
.NavIcon-close i.icon8{ top: 15px; left: 15px;}
.NavIcon-close i.icon9{ top: 20px; left: 20px;}
.NavIcon-close:hover { transform: rotate(720deg); -webkit-transform: rotate(720deg); -o-transform: rotate(720deg); -moz-transform: rotate(720deg); }

.overlay { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; bottom: 0px; right: 0px; z-index: 900; opacity: 0; visibility: hidden; background: transparent; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; backface-visibility: hidden; }
.headerNav-backdrop { position: fixed; overflow: hidden; width: 24px; height: 24px; overflow: hidden; right: 0; top: 0; z-index: 998; }
.headerNav-backdrop .headerNav-overlay { position: absolute; top: 0px; right: 0px; opacity: 0; border-radius: 50%; background-color: #000; width: 24px; height: 24px; }
.headerNav-backdrop.open { position: fixed; width: 580px !important; height: 100%; top: 0px; right: 0px;  }
.headerNav-backdrop.open .headerNav-overlay { opacity: 1; right: 15px; top: 15px; }

.menuInner{ position: fixed; width: 580px; padding: 0px ; height: 100%; top: 0; right: 0; opacity: 0; visibility: hidden; color: #fff; text-align: right; overflow: hidden; z-index: -1; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.menuInner .menu { padding-top: 14% ; }
.menu li{ width: 500px; float: left; margin: 20px 40px; overflow: hidden; }
.menu li a{ color: #ccc; line-height: 60px;}
.menu li p{ float: left; padding-left: 20px; font-size: 60px; width: 360px; text-align: left; text-transform: uppercase; font-weight: bold; position: relative; }
.menu li p i{ display: block; width: 100%; height: 2px; background-color: #ff4229; position: absolute; margin-top: -1px; top: 50%; left: 0;  transform: translateX(-100%); transition: all 0.8s ease;}
.menu li span{ float: right; font-size: 18px; width: 120px; text-align: right;}
.menu li, .mcontact { transform: translateX(100px); -webkit-transform: translateX(100px); opacity: 0; transition: 0.4s 0s; -webkit-transition: 0.4s 0s; }
.menu-moible-handler { opacity: 0; transition: 0.4s 0s; -webkit-transition: 0.4s 0s; }
.menu li:nth-child(1) { transition-delay: 300ms; -webkit-transition-delay: 300ms; }
.menu li:nth-child(2) { transition-delay: 400ms; -webkit-transition-delay: 400ms; }
.menu li:nth-child(3) { transition-delay: 500ms; -webkit-transition-delay: 500ms; }
.menu li:nth-child(4) { transition-delay: 600ms; -webkit-transition-delay: 600ms; }
.menu li:nth-child(5) { transition-delay: 700ms; -webkit-transition-delay: 700ms; }
.menu li.on a,.menu li:hover a{ color: #fff;}
.menu li.on i,.menu li:hover i{ transform: translateY(0%); opacity: 1; }

.mcontact { transition-delay: 900ms; -webkit-transition-delay: 900ms; }
.mcontact { position: absolute; right: 0; bottom: 40px; width: 500px; height: 60px; padding: 0 40px ; text-align: left;  }
.mcontact .fl{ font-size: 16px; color: #fff; line-height: 30px;}
.mcontact .qq{ float: right; width: 30px; height: 30px; background: url(../images/iconContact.png) no-repeat; margin: 15px 0;}
.mcontact .qq:hover{ background-position: 0 -30px;}

.open .menu li, .open .mcontact { transform: translateX(0); -webkit-transform: translateX(0); opacity: 1; }
.overlay.show { opacity: 1; visibility: visible; }
.menuInner.open { opacity: 1; z-index: 99999; visibility: visible; }

.header.fixed{position:fixed; z-index:99999;}
.header.fixed .headerLogo a{ display:block; width:155px; height:42px; background:url(../images/indexLogo1.png) no-repeat;}


@-webkit-keyframes scaleUpDown {
    from { -webkit-transform: scale(1.08); transform: scale(1.08); }
    to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes scaleUpDown {
    from { -webkit-transform: scale(1.08); transform: scale(1.08); }
    to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes empty {
    0% { opacity: 1; }
}
@-moz-keyframes empty {
    0% { opacity: 1; }
}
@keyframes empty {
    0% { opacity: 1; }
}

/* headerFloat */
.headerFloat{ width: 100%; position: fixed; top: 0; width: 100%; display: none; height: 90px; z-index: 999999; background-color: #fff; -webkit-box-shadow:0 0 10px rgba(0,0,0,0.1); -moz-box-shadow:0 0 10px rgba(0,0,0,0.1); box-shadow:0 0 10px rgba(0,0,0,0.1);}
.headerFloat .logo{ padding:0; margin: 24px 0 0 3.125%; width:155px; height:42px;}
.headerFloat .logo a{ display:block; width:260px; height:40px; background:url(../images/indexLogo1.png) no-repeat;}
.headerFloat .nav{ margin: 0 3.125% 0 0; }
.headerFloat .nav .m{position: relative;float: left; width: 100px;margin: 0 15px;display: inline;text-align: center;}
.headerFloat .nav h3{font-weight: normal;font-size: 18px;}
.headerFloat .nav h3 a{zoom: 1;height: 40px;line-height: 40px;padding: 25px 0; display: block;color: #333}
.headerFloat .nav .on h3 a{ color: #ff4229; }
.headerFloat .nav .sub{display: none;width: 130px;padding: 0;position: absolute;left:-15px;top: 90px; background-color: rgba(255, 255, 255, 0.95); float: left;line-height: 38px; -webkit-box-shadow:0 0 10px rgba(0,0,0,0.1); -moz-box-shadow:0 0 10px rgba(0,0,0,0.1); box-shadow:0 0 10px rgba(0,0,0,0.1);}
.headerFloat .nav .sub li{text-align: center; font-size: 14px;}
.headerFloat .nav .sub li a{color: #333;display: block;zoom: 1;}
.headerFloat .nav .sub li:hover a,.headerFloat .nav .sub li.select a{background: #ff4229;color: #fff;}



/* indexBanner */
#indexBanner{position: relative; overflow: hidden; height:100vh; min-width:90rem; background-color: #21282e;}

/* banner */
.banner{height:100%; position:relative; min-width:90rem;}
.switch{ position: absolute; height: 24px; left: 3.125%; bottom: 40px; width: 80px;}
.prev,.next{display:block; width:24px; height:5px; border-bottom: solid 2px #fff; position:absolute; z-index:222; bottom:0; overflow:hidden; cursor:pointer; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); transition: all 0.3s ease;}
.prev{left:0; background: url(../images/prev.png) top left no-repeat;}
.next{right:0; background: url(../images/next.png) top right no-repeat;}
.prev:hover{ background: url(../images/prev-1.png) top left no-repeat;}
.next:hover{ background: url(../images/next-1.png) top left no-repeat;}
.prev:hover,.next:hover{ width: 24px; border-bottom: solid 2px #ff4229; }
.nav-main a:hover,.nav-main a.cur{opacity:1; -moz-opacity:1; filter:alpha(opacity=100);}
.rightIcon{ width: 60px; height: 87%; position: absolute; right: 0; top: 0; background-color: #fff; z-index: 222;}
.rightIcon .item{display:block; width:100%; height:120px; position:absolute; z-index:225; top:30%; margin-top:0; left:0; text-align:center;}
.rightIcon .item a{display:inline-block; width:60px; height:40px; text-align: center; line-height: 40px; margin:0 0; color: #333; overflow:hidden; font-size: 16px; font-weight: bold; position: relative; transition: all 0.5s ease;}
.rightIcon .item a p{ width: 0; height: 2px; background-color: #ff4229; display: block; position: absolute; z-index: 2; top: 50%; margin: -1px 0 0 -17px; left: 50%;transition: all 0.5s ease;}
.rightIcon .item a.cur{ font-size: 28px; }
.rightIcon .item a.cur p{ display: block; width: 34px;}

.rightIcon .icon{ width: 60px; height: 300px; position: absolute; bottom: 0; left: 0;}
.rightIcon .icon dl{ float: left; width: 100%; height: 60px; position: relative;}
.rightIcon .icon dl dt{ width: 60px; height: 60px; background:#fff url(../images/icon.png) no-repeat; cursor: pointer; position: relative; z-index: 5;}
.rightIcon .icon dl dt a{ display: block; width: 60px; height: 60px;}
.rightIcon .icon dl.icon1 dt{ background-position: 0 0; }
.rightIcon .icon dl.icon2 dt{ background-position: 0 -60px; }
.rightIcon .icon dl.icon3 dt{background:#ff4229 url(../images/icon.png) no-repeat;  background-position: -60px -120px; }
.rightIcon .icon dl.icon4 dt{ background-position: 0 -180px; }
.rightIcon .icon dl.icon5 dt{ background-position: 0 -240px; }
.rightIcon .icon dl:hover dt{background-color: #ff4229;}
.rightIcon .icon dl.icon1:hover dt{background-position: -60px 0;  }
.rightIcon .icon dl.icon2:hover dt{background-position: -60px -60px;  }
.rightIcon .icon dl.icon3:hover dt{background-position: -60px -120px;  }
.rightIcon .icon dl.icon4:hover dt{background-position: -60px -180px;  }
.rightIcon .icon dl.icon5:hover dt{background-position: -60px -240px;  }
.rightIcon .icon dl.icon2 dd{ width: 150px; height: 150px; transition: all 0.5s ease; position: absolute; top: 0; right: -150px; z-index: 1;}
.rightIcon .icon dl.icon2 dd img{ width: 150px; height: 150px;}
.rightIcon .icon dl.icon2:hover dd{ right: 60px;}
.rightIcon .icon dl.icon3 dd{ width: 130px; border: solid 1px #eee; transition: all 0.5s ease; height: 245px;  position: absolute; top: 0; right:-132px; z-index: 1;}
.rightIcon .icon dl.icon3 dd a{ float: left;display: block; width: 100%; height: 40px; text-align: center; line-height: 40px; border-top: solid 1px #eee; background-color: #fff;}
.rightIcon .icon dl.icon3 dd a:hover{ background-color: #ff4229; color: #fff;}
.rightIcon .icon dl.icon3 dd a:first-child{ border-top: 0;}
.rightIcon .icon dl.icon3:hover dd{ right: 60px;}
.rightIcon .icon dl.icon5 dd{ height: 48px; padding: 6px 15px; background-color:rgba(0, 0, 0, 0.8); position: absolute; top: 0; right: -200px; color: #fff; font-size: 14px; line-height: 24px; z-index: 1; width: 170px;transition: all 0.5s ease;}
.rightIcon .icon dl.icon5:hover dd{ right: 60px;}

.banner-box,.slide{display:block; width:100%; height:100%; overflow:hidden;}
.banner-box{position:relative;}
.slide{display:none; height:100%; position:relative; position:absolute; z-index:8;}

/* #banner1{background:url(../images/banner1.jpg) center center no-repeat;} */
/*#banner2{background:url(../images/banner1.jpg) center center no-repeat;}
#banner3{background:url(../images/banner2.jpg) center center no-repeat;}*/

.slide a{display:block; width:100%; height:100%; cursor:pointer;}
.banner2_1,.banner2_2,.banner3_1,.banner3_2{position:absolute;z-index:9;left:50%;}
.banner1_1{position:absolute;z-index:9;left:10%; top: 30%; font-size: 60px; color: #fff; font-weight: bold; line-height: 96px;}
.banner1_2{position:absolute;z-index:9;left:10%; top: 55%; width: 15%; height: 3px; background:#fff;}

.banner2_1{height:212px; top:90px; margin-left:-240px;}
.banner3_1{height:130px; top:230px; margin-left:-500px;}

.banAnimate .banner1_1{display:block;animation-name:bannera;-webkit-animation:bannera 0.4s linear 0s normal none;-moz-animation:bannera 0.4s linear 0s normal none;animation:bannera 0.4s linear 0s normal none;}
@-webkit-keyframes bannera{from{opacity:0;top:10%;} to{opacity:1;top:30%;} }
@-moz-keyframes bannera{from{opacity:0;top:10%;} to{opacity:1;top:30%;} }
@keyframes bannera{from{opacity:0;top:10%;} to{opacity:1;top:30%;} }

.banAnimate .banner1_2{display:block;animation-name:bannerb;-webkit-animation:bannerb 0.4s linear 0s normal none;-moz-animation:bannerb 0.4s linear 0s normal none;animation:bannerb 0.4s linear 0s normal none;}
@-webkit-keyframes bannerb{from{opacity:0;top:70%;} to{opacity:1;top:55%;} }
@-moz-keyframes bannerb{from{opacity:0;top:70%;} to{opacity:1;top:55%;} }
@keyframes bannerb{from{opacity:0;top:70%;} to{opacity:1;top:55%;} }


.banAnimate .banner2_1{display:block;animation-name:bannerd;-webkit-animation:bannera 0.4s linear 0s normal none;-moz-animation:bannerd 0.4s linear 0s normal none;animation:bannerd 0.4s linear 0s normal none;}
@-webkit-keyframes bannerd{from{opacity:0;top:40px;} to{opacity:1;top:90px;} }
@-moz-keyframes bannerd{from{opacity:0;top:40px;} to{opacity:1;top:90px;} }
@keyframes bannerd{from{opacity:0;top:40px;} to{opacity:1;top:90px;} }

.banAnimate .banner3_1{display:block;animation-name:bannere;-webkit-animation:bannere 0.3s linear 0s normal none;-moz-animation:bannere 0.3s linear 0s normal none;animation:bannere 0.3s linear 0s normal none;}
@-webkit-keyframes bannere{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
@-moz-keyframes bannere{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
@keyframes bannere{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }

.Vidage{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}
.Vidage__backdrop{position:absolute;top:0;right:0;bottom:0;left:0}
.Vidage--allow .Vidage__video{display:block}
.Vidage{top:0;right:0;bottom:0;left:0;z-index:-1}
.Vidage,.Vidage__video{min-width:100%;min-height:100%}
.Vidage__video{position:absolute;top:50%;left:50%;width:auto;height:auto;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);display:none}

.indexCont{margin: 0 auto;/*  background: url(../images/indexBg.png) repeat; */ height:100%; position:absolute; width:100%;}



/* indexService */
.indexService{ width: 93.75%; border-bottom: solid 1px #f5f5f5; position: relative; padding: 0 3.125%; }
.indexService .Top{ width: 93.75%; position: absolute; z-index: 3; top: 50px; left: 0; padding: 0 3.125%; }
.indexService .Top .icon1{ width: 2.5rem; height: 1.875rem; position: absolute; top: 0; left: 3.125%;}
.indexService .Top .icon1 img{ width: 2.5rem; height: 1.875rem; }
.indexService .Top .icon2{ width: 2.5rem; height: 1.875rem; position: absolute; top: 12.5rem; right: 3.125%;}
.indexService .Top .icon2 img{ width: 2.5rem; height: 1.875rem; }
.indexService .Top .title{ font-size: 2rem; color: #000; font-weight: bold; position: absolute; line-height: 3rem; top: 3.125rem; left: 7.8125%;}
.indexService .Top .summary{ font-size: 0.875rem; color: #333; line-height: 1.625rem; position: absolute; left: 7.8125%; top: 9.375rem}
.indexService .Top .more a{ display: block; font-size: 14px; text-transform: Capitalize; width: 16.875rem; position: absolute; top: 6.25rem; right: 7.8125%; border-bottom: solid 2px #000; padding-bottom: 15px; color: #000; background: url(../images/more01.png) top 3px right 0 no-repeat;}
.indexService .Top .more a:hover{ color: #ff4229; border-bottom-color: #ff4229; background: url(../images/more02.png) top 3px right 0 no-repeat;}
.indexService .List{ width: 100%; position: relative; z-index: 1;}
.indexService .List dl{ float: left; width: 25%; text-align: center;padding-top: 21.875rem; border-left: solid 0.0625rem #f5f5f5; height: 43.75rem; position: relative; overflow: hidden; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
.indexService .List dl:first-child{ border-left: 0;}
.indexService .List dl p{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-color: #ff4229; transform: translateY(101%); transition: all 0.8s ease;}
.indexService .List dl dt,.indexService .List dl dd{ position: relative; z-index: 2;}
.indexService .List dt img{ max-width: 100%; margin: auto; transition: all 0.8s ease;}
.indexService .List dt .img01{ display: block;}
.indexService .List dt .img02{ display: none;}
.indexService .List dl dd h3{ font-size: 24px; font-weight: normal; margin: 20px 0; color: #333; transition: all 0.8s ease;}
.indexService .List dl dd h6{ font-size: 16px; color: #565656; line-height: 26px; font-weight: normal; transition: all 0.8s ease;}
.indexService .List dl:hover .img01{ display: none;}
.indexService .List dl:hover .img02{ display: block;}
.indexService .List dl:hover h3,.indexService .List dl:hover h6{ color: #fff;}
.indexService .List dl:hover p{transform: translateY(0); opacity:1;}


/* indexCase */
.indexCase{ width: 93.75%; position: relative; padding: 3.125% 3.125%; }
.indexCase .Top{ width: 100%; position: relative; z-index: 2; }
.indexCase .Top .title{ font-size: 2rem; color: #000; font-weight: bold; line-height: 3rem; }
.indexCase .Top .summary{ font-size: 0.875rem; color: #999; line-height: 1.625rem; }
.indexCase .Top .more a{ position: absolute; top: 0; right: 0; font-size: 14px; padding-right: 100px; color: #000; background: url(../images/more01.png) center right no-repeat;}
.indexCase .Top .more a:hover{  background: url(../images/more02.png) center right no-repeat; color: #ff4229; }
.indexCase .List{ width: 101.61%; margin: 2% -0.805%;}
.indexCase .List dl{ float: left; width:65.05%; margin:  0.805%; position: relative; overflow: hidden;}
.indexCase .List dl dt{ position: relative; z-index: 1; width: 100%;}
.indexCase .List dl dt img{ width: 100%;  transition: all 0.8s ease;}
.indexCase .List dl dd{ position: absolute; z-index: 2; top: 8.3%;  right: 4.2%; width: 23.57%; padding: 0 2.5%; height: 83.4%; background-color: rgba(0, 0, 0, 0.9); overflow: hidden;}
.indexCase .List dl dd .title{ font-size: 1.5rem ; color: #fff; font-weight: bold; margin: 3.75rem 0 1.875rem; }
.indexCase .List dl dd .cont{ font-size: 0.875rem; color: #fff; line-height: 24px;}
.indexCase .List dl dd .link a{ position: absolute; right: 8.3%; font-size: 14px; text-transform: capitalize; bottom: 8.3%; font-size: 14px; color: #fff; font-weight: bold; padding-right: 30px; background: url(../images/more05.png) center right no-repeat;}
.indexCase .List dl:hover dt img{transform:scale(1.2)}
.indexCase .List dl:hover dd{ background-color: rgba(255, 66, 61, 0.9);}
.indexCase .List li{ float: left; width: 31.72%; margin:  0.805%; position: relative;overflow: hidden;}
.indexCase .List li .img{ width: 100%; position: relative; z-index: 1;}
.indexCase .List li .img .thumbnail{ width: 100%; transition: all 0.8s ease; }
.indexCase .List li .cont{ width: 94%; padding:1.5625rem 3%; overflow: hidden; position: relative; z-index: 2; height: 3.125rem;  background-color: rgba(255, 255, 255, 1);}
.indexCase .List li .cont .title{ font-size: 24px; color: #333; margin-bottom: 5px;}
.indexCase .List li .cont .summary{ font-size: 14px; color: #999;}
.indexCase .List li .img p{ width: 100%;  height: 100%; background-color: rgba(0, 0, 0, 0.4); position: absolute; left: 0; top: 0; transform: translateY(-101%); transition: all 0.8s ease;}
.indexCase .List li .img p span{ display: block; width: 100%; font-size: 1.875rem; color: #fff; text-align: center; line-height: 50px; position: absolute; top: 50%; margin-top: -25px; left: 0;}
.indexCase .List li:hover .thumbnail{transform:scale(1.2)}
.indexCase .List li:hover .title{ color: #ff4229;}
.indexCase .List li:hover .img p{transform: translateY(0); opacity:1;}



/* indexPartner */
.indexPartner{ width: 93.75%; position: relative; padding: 3.125% 3.125%;  background-color: #f8f8f8;}
.indexPartner .Top{ width: 100%; position: relative; z-index: 2; }
.indexPartner .Top .title{ font-size: 2rem; color: #000; font-weight: bold; line-height: 3rem; }
.indexPartner .Top .summary{ font-size: 0.875rem; color: #999; line-height: 1.625rem; }
.indexPartner .Top .more{  width: 16.875rem; height: 0.125rem; background-color: #000; position: absolute; right: 3.75rem; top: 2.8125rem;}
.indexPartner .Top .icon{ width: 1.25rem; position: absolute; top: 1.875rem;right: 0;}
.indexPartner .Top .icon img{ width: 100%;}
.indexPartner .List{ width: 100%; margin-top: 3%;}
.indexPartner .List li{ float: left; width:16.66% ;}
.indexPartner .List li .img1{ width: 100%; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray; display: block;}
.indexPartner .List li .img2{ display: none; width: 100%;}
.indexPartner .List li:hover{ background-color: #ff4229;}
.indexPartner .List li:hover .img1{ display: none; }
.indexPartner .List li:hover .img2{ display: block; }




/* indexNews */
.indexNews{ width: 93.75%; position: relative; padding: 3.125% 3.125%;  }
.indexNews .Top{ width: 93.75%; padding: 3.125% 3.125% 0; top: 0; left: 0; position: absolute; z-index: 2; }
.indexNews .Top .title{ font-size: 2rem; color: #000; font-weight: bold; line-height: 3rem; }
.indexNews .Top .summary{ font-size: 0.875rem; color: #999; line-height: 1.625rem; }

.NewsL{width: 100%; overflow: hidden; position: relative;}
.NewsL .NewsNav{ position: relative; float: right; z-index: 3;}
.NewsL .NewsNav ul{ text-align: center;}
.NewsL .NewsNav li{ display: inline-block;  margin-left: 3.125rem;}
.NewsL .NewsNav li a{display: block;font-size: 16px; color: #333; font-weight: bold; }
.NewsL .NewsNav li a:hover{color: #ff4229;}
.NewsL .NewsNav li.on a{color: #ff4229;}
.NewsL .NewsLb{ width: 100%; margin-top: 8%;}
.NewsL .NewsLb ul{overflow: hidden;zoom: 1; width: 104.44%; margin: 2.22% -2.22%;}
.NewsL .NewsLb li{overflow: hidden;width: 20.56%;float: left; height: 250px; margin: 2.22%;}
.NewsL .NewsLb li .name a{font-size: 18px; color: #000; display: block;}
.NewsL .NewsLb li .time{ font-size: 14px; color: #999; margin: 0.625rem 0;}
.NewsL .NewsLb li .line{ width: 1.875rem; height: 0.1875rem; background-color: #ddd; margin: 0.3125rem 0 0.625rem; transition: all 0.8s ease;}
.NewsL .NewsLb li .con{ font-size: 14px; line-height: 26px; color: #666; height: 80px;}
.NewsL .NewsLb li .link{ margin-top: 1.875rem; position: relative; width: 6.25rem; height: 2.25rem; overflow: hidden;}
.NewsL .NewsLb li .link a{ }
.NewsL .NewsLb li .link p{ width: 0.5rem; display: block; height: 0.5rem;  top:  0.875rem; left: 0; position: absolute;}
.NewsL .NewsLb li .link p i{ background-color: #ff4229;}
.NewsL .NewsLb li .link p i:nth-child(1){ width: 0.125rem; height: 0.5rem; position: absolute; top: 0; left: 50%; margin-left: -0.0625rem;}
.NewsL .NewsLb li .link p i:nth-child(2){ width: 0.5rem; height: 0.125rem; position: absolute; top: 50%; left: 0; margin-top: -0.0625rem;}
.NewsL .NewsLb li .link span{ display: block; width: 5.3125rem; padding-left: 0.9375rem; height: 2.25rem; background: #ff4229 url(../images/more05.png) center right  0.9375rem no-repeat; color: #fff;  line-height: 2.25rem; font-size: 0.875rem; font-weight: bold; text-transform: capitalize; transform: translateX(-6.25rem); transition: all 0.8s ease;}
.NewsL .NewsLb li:hover .name a{ color: #000; font-weight: bold;}
.NewsL .NewsLb li:hover .line{ background-color: #ff4229; width: 100%;}
.NewsL .NewsLb li:hover .time,.NewsL .NewsLb li:hover .con{ color: #333;}
.NewsL .NewsLb li:hover .link p{ display: none;}
.NewsL .NewsLb li:hover .link span{ transform: translateX(0); opacity:1;}

.NewsL .more a{ display: block; font-size: 14px; text-transform: Capitalize; width: 16.875rem; position: relative; left: 50%; margin-left: -8.4375rem; border-bottom: solid 2px #000; padding-bottom: 15px; color: #000; background: url(../images/more01.png) top 3px right 0 no-repeat;}
.NewsL .more a:hover{ color: #ff4229; border-bottom-color: #ff4229; background: url(../images/more02.png) top 3px right 0 no-repeat;}


/* indexContact1 */
.indexContact{ background-color: #21282e; width: 93.75%; position: relative; padding: 0 3.125%; }
.indexContact .Top{ width: 100%; text-align: center; color: #fff; padding: 3.125% 0; font-size: 2.25rem; font-weight: bold; border-bottom: dotted 1px #323b42}
.indexContact .List{ width: 100%; padding: 2% 0;}
.indexContact .List dl{ float: left; width: 19%; margin-left: 8%; color: #fff;}
.indexContact .List dl:first-child{ margin-left: 0%;}
.indexContact .List dl dt{ height: 1.125rem; width: 100%; line-height: 1.125rem;}
.indexContact .List dl dt img{ float: left; }
.indexContact .List dl dt span{ float: left; margin-left: 0.9375rem; font-size: 0.875rem; font-weight: bold;}
.indexContact .List dl dd{ width: 100%; font-size: 0.875rem;  color: #e8e8e8; margin-top: 0.9375rem; line-height: 1.625rem}
.indexContact .List dl dd a{ color: #e8e8e8;}
.indexContact .List dl dd a:hover{ color: #ff4229; }


/* indexFooter */
.indexFooter{ background-color: #fff; width: 93.75%; position: relative; padding:1% 3.125%; margin: 0 auto; }
.indexFooter .Left{ color: #999; font-size: 0.75rem; width: 100%; position: relative; z-index: 1; line-height: 1.5rem;}
.indexFooter .Left p{ width: 100%; margin: 0.3125rem 0;}
.indexFooter .Left a{ color: #999;}
.indexFooter .Left a:hover{ color: #ff4229; text-decoration: underline;}
.indexFooter .Right{ width: 7.5rem; height: 1.25rem; position: absolute; top: 1.625rem; right: 0; z-index: 1;}
.indexFooter .Right dl{ float: left; width: 1.25rem; height: 1.25rem; margin: 0 0.625rem;}
.indexFooter .Right dl img{ width: 1.25rem; height: 1.25rem; opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);}
.indexFooter .Right dl:hover img{ opacity:1; -moz-opacity:1; filter:alpha(opacity=100);}

.theme-mask{z-index:9999; position:fixed; _position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.8); display:none; }
.popover_weibo, .popover_weixin, .popover_mobile{ width:360px; height:400px; z-index:10000; position:fixed; top:50%;left:50%; background:#fff; margin:-200px 0 0 -180px;   box-shadow:1px 1px 6px 3px rgba(0,0,0,.2); display:none; text-align:center; border-radius:5px;}
.popover_weibo dl, .popover_weixin dl, .popover_mobile dl{ margin-top:50px; font-size:14px; line-height:40px;}
.popover_weibo dl a, .popover_weixin dl a, .popover_mobile dl a{ width:110px; height:40px; background:#ff4229; color:#fff; display:inline-block; border-radius:5px; font-size:14px; margin-top:20px;}

.theme-bg{z-index:9999; position:fixed; _position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.8); }
.popover_statement{ width:320px; height:320px; padding:20px; z-index:10000; position:fixed; top:50%;left:50%; background:#fff; margin:-200px 0 0 -180px;   box-shadow:1px 1px 6px 3px rgba(0,0,0,.2); border-radius:5px; font-size:14px; line-height:26px;}
.popover_statement .title{ text-align:center; font-size:18px; font-weight:bold; line-height:36px; margin-bottom:10px;}
.popover_statement .link{text-align:center;}
.popover_statement .link a{width:110px; height:40px; background:#ff4229; color:#fff; border-radius:5px; display:inline-block; font-size:14px; margin:20px 10px 0; line-height:40px;}

.DownloadForm{ width:320px; height:370px; z-index:10000; position:fixed; top:50%;left:50%; background:#fff; margin:-185px 0 0 -150px;   box-shadow:1px 1px 6px 3px rgba(0,0,0,.2); display:none; text-align:center; border-radius:5px;}
.DownloadForm .message{ width: 300px; height: 350px; padding: 10px;}
.DownloadForm .message .top{ font-size: 24px; text-align: center; color: #ff4229; font-weight: bold; margin: 20px 0;}
.DownloadForm .message .form{ width: 270px; margin: 0 15px;}
.DownloadForm .message .form p{ position: relative; margin-bottom:15px;}
.DownloadForm .message .form input.txt,.DownloadForm select{ border-radius:5px; border:1px solid #e0dede; padding:0 10px;width:248px; background:#fff; margin:0;height:40px;line-height:40px;font-size:14px; color: #333;}
.DownloadForm .message .form input::-webkit-input-placeholder,.productD .message .form textarea::-webkit-input-placeholder {color: #aaa;font-size: 12px;text-align: left;}
.DownloadForm .message .form textarea.txt{border:1px solid #e0dede; padding:3px 10px; width:248px; color: #999; background:#fff; margin:0; height:80px; line-height:34px; font-size:14px; border-radius: 5px;}
.DownloadForm .message .form input.btn{ border-radius:5px; border:0; background:#ff4229; width:130px; height:40px; cursor:pointer; text-align:center; font-size:14px; color:#fff; margin:0; }
.DownloadForm .message .form input.btn:hover{ background-color: #333;}
.DownloadForm .message .form select{color:#666}
.DownloadForm .close{ width:130px; height:40px; line-height: 40px; background:#333; color:#fff; display:inline-block; border-radius:5px; font-size:14px; margin:0;}
.DownloadForm .close:hover{ background-color: #ff4229;}
.DownloadForm .row input:focus{ border:1px solid #e0dede; padding:0 10px; width:108px; background:#fff; height:40px; line-height:40px; font-size:14px; float:left; color: #666; border-radius: 5px;}


/* PopUp */
.PopUp{position: fixed; width: 580px; height: 240px; top: 50%; left: 50%; padding: 50px; margin: -170px 0 0 -340px; z-index: 99999999; display: none; background: url(../images/suncher_fd.jpg) center center no-repeat; color: #fff; overflow: hidden;  -webkit-box-shadow:0 0 10px rgba(0,0,0,0.1); -moz-box-shadow:0 0 10px rgba(0,0,0,0.1); box-shadow:0 0 10px rgba(0,0,0,0.1);}
.PopUp .left{  width: 380px;  text-align: left;}
.PopUp .left .sgm{ font-size: 28px; line-height: 48px}
.PopUp .left .sgm p{ font-weight: bold;}
.PopUp .left .tel{ font-size: 50px; margin: 5px 0;}
.PopUp .left .sgs{ font-size: 14px; margin-top: 10px;}
.PopUp .right{ width: 182px;}
.PopUp .right img{ width: 182px; height: 182px;}
.PopUp .right a{ margin-top: 16px; width: 182px; height: 42px; line-height: 42px; background-color: #fff; display: block; text-align: center; font-size: 18px; color: #ff4229;}
.PopUp .kq{ width: 26px; height: 26px; background: url(../images/close.png) center center no-repeat; position: absolute; top: 10px; right: 10px;}


/* pageBanner */
.pageBanner{ width: 100%; position: relative; z-index: 1; margin: auto; padding: 0; overflow: hidden;}
.pageBanner .BgImg{ width: 100%; position: relative; z-index: 1; overflow: hidden;}
.pageBanner .BgImg img{ width: 100%;}
.pageBanner .Cont{ width: 90rem; position: absolute; top: 20%; left: 50%; margin-left: -720px; z-index: 2; color: #fff;}
.pageBanner .Cont .title{ font-size: 70px; width: 100%;}
.pageBanner .Cont .slogan{ font-size: 16px; line-height: 38px; margin-top: 40px;}
.pageBanner .Cont .more a{ display: block; width: 128px; padding-left: 40px; font-size: 14px; color: #fff; line-height: 38px; height: 38px; border: solid 1px #fff; margin-top: 70px; background: url(../images/more05.png) right 2.5rem center no-repeat;  transition: all 0.5s ease;}
.pageBanner .Cont .more a:hover{ border-color: #fff; color: #ff4229; background: #fff url(../images/more04.png) right 1.5rem center no-repeat;}

.pageBanner .ContD{ width: 90rem; position: absolute; top: 20%; left: 50%; margin-left: -720px; z-index: 2; text-align: center; color: #fff;}
.pageBanner .ContD .title{ font-size: 46px; font-weight: bold;}
.pageBanner .ContD .slogan{ font-size: 16px; width: 700px; margin:30px auto 10px; line-height: 28px; }
.pageBanner .ContD .more a{ display: block; width: 128px; text-align: left; padding-left: 40px; font-size: 14px; color: #fff; line-height: 38px; height: 38px; border: solid 1px #fff; margin: 40px auto 0; background: url(../images/more05.png) right 2.5rem center no-repeat;  transition: all 0.5s ease;}
.pageBanner .ContD .more a:hover{ border-color: #fff; color: #ff4229; background: #fff url(../images/more04.png) right 1.5rem center no-repeat;}

.pageBanner .ContMD{ width: 90rem; position: absolute; top: 20%; left: 50%; margin-left: -720px; z-index: 2; color: #fff;}
.pageBanner .ContMD .left{ width: 600px;}
.pageBanner .ContMD .title{ width: 100%; font-size: 70px;}
.pageBanner .ContMD .slogan{ width: 100%; font-size: 16px; line-height: 38px; margin-top: 40px;}
.pageBanner .ContMD .more a{ display: block; width: 128px; padding-left: 40px; font-size: 14px; color: #fff; line-height: 38px; height: 38px; border: solid 1px #fff; margin-top: 70px; background: url(../images/more05.png) right 2.5rem center no-repeat;  transition: all 0.5s ease;}
.pageBanner .ContMD .more a:hover{ border-color: #fff; color: #ff4229; background: #fff url(../images/more04.png) right 1.5rem center no-repeat;}
.pageBanner .ContMD .right{ width: 285px; height: 580px; margin: -70px 150px 0 0; position: relative; background: url(../images/case/mobile.png) center center no-repeat; }
.pageBanner .ContMD .right p.img{ width: 252px; height: 443px; margin: 69px 17px 68px 16px; position: relative; overflow: hidden;}
.pageBanner .ContMD .right p.img img{ width: 252px; }

.pageBanner .ContAbout{ width: 90rem; position: absolute; top: 30%; left: 50%; margin-left: -720px; z-index: 2; text-align: center; color: #fff;}
.pageBanner .ContAbout .title{ font-size: 70px; }
.pageBanner .ContAbout .list{ width: 100%; text-align: center; margin-top: 120px; }
.pageBanner .ContAbout .list dl{ display: inline-block; width: 24.72%; line-height: 50px; padding: 20px 0; height: 100px;  border-left: solid 1px rgba(255, 255, 255, 0.2);}
.pageBanner .ContAbout .list dl:first-child{ border-left: 0;}
.pageBanner .ContAbout .list dl dt{ font-size: 70px; font-weight: bold; position: relative;}
.pageBanner .ContAbout .list dl dt span.plus{ position: absolute; bottom: 0; font-size: 32px; font-weight: normal; line-height: 32px;}
.pageBanner .ContAbout .list dl dd{ font-size: 18px;}


/* fenye */
.pages { font-size:16px; margin:50px 0; text-align:center; width: 100%; text-transform: uppercase;}
.pages a { display:inline-block; text-align:center; color:#21282e; padding:0 ;  margin:0 15px;}
.pages a:hover { color:#ff4229; text-decoration:none;   -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; }
.pages span,.pages a.page-num-current { display:inline-block;  color:#ff4229; text-decoration:line-through; text-align:center; padding: 0; margin:0 15px;}


/* pageNav */
.pageNav{ width: 100%; padding: 3% 0; margin: auto; position: relative; border-bottom: solid 1px #eee; }
.pageNav ul{ text-align: left; width: 90rem; margin: auto;}
.pageNav ul li{ display: inline-block; margin-right: 50px;}
.pageNav ul li a{ font-size: 16px; color: #333;}
.pageNav ul li#selected a,.pageNav ul li:hover a{ color: #ff4229;}

/* pageCase */
.pageCase{  width: 90rem; padding: 3% 0; margin: auto; position: relative;}
.pageCase ul{ width: 101.61%; margin: 2% -0.805%;}
.pageCase ul li{ float: left; width: 31.72%; margin:  0.805%; position: relative;overflow: hidden;}
.pageCase ul li .img{ width: 100%; position: relative; z-index: 1;}
.pageCase ul li .img .thumbnail{ width: 100%;  transition: all 0.3s ease;}
.pageCase ul li .cont{ width: 94%; padding:1.5625rem 3%; overflow: hidden; position: relative; z-index: 2; height: 3.125rem;  background-color: rgba(255, 255, 255, 1);}
.pageCase ul li .cont .title{ font-size: 24px; color: #333; margin-bottom: 5px;}
.pageCase ul li .cont .title span{ font-size: 18px; color: #666;}
.pageCase ul li .cont .summary{ font-size: 14px; color: #999;}
.pageCase ul li .img p{ width: 100%;  height: 100%; background-color: rgba(0, 0, 0, 0.4); position: absolute; left: 0; top: 0; transform: translateY(-101%); transition: all 0.8s ease;}
.pageCase ul li .img p span{ display: block; width: 100%; font-size: 1.875rem; color: #fff; text-align: center; line-height: 50px; position: absolute; top: 50%; margin-top: -25px; left: 0;}
.pageCase ul li:hover .thumbnail{transform:scale(1.2)}
.pageCase ul li:hover .title{ color: #ff4229;}
.pageCase ul li:hover .img p{transform: translateY(0); opacity:1;}


/* pageMore */
.pageMore{ width: 100%; padding: 3% 0; margin: auto; position: relative; background-color: #ff4229; color: #fff; text-align: center;}
.pageMore .p1{ font-size: 32px;}
.pageMore .p2{ font-size: 18px; margin: 20px 0 40px;}
.pageMore .p3 a{ width: 140px; height: 50px; margin: auto; font-size: 14px; padding-left: 30px; display: block; text-align: left; line-height: 50px; color: #333; background:#fff url(../images/more03.png) right 30px center no-repeat;}
.pageMore .p3 a:hover{ color: #ff4229; background:#fff url(../images/more04.png) right 30px center no-repeat;}


/* caseTop */
.caseTop{ width: 68.75rem; height: 37.5rem; position: relative; z-index: 2; left: 50%; margin: -15rem 0 5rem -34.375rem; }
.caseTop .caseBg{ width: 68.75rem; height: 37.5rem; position: relative; z-index: 2;}
.caseTop .caseBg img{ width: 68.75rem; height: 37.5rem;}
.caseTop .caseLink{ width: 66.25rem;  height: 2.5rem; position: absolute; top: 1.375rem; left: 1.25rem; z-index: 3;}
.caseTop .caseLink img{width: 66.25rem;  height: 2.5rem; position: relative; z-index: 3; }
.caseTop .caseLink p{ position: absolute; height: 1.5rem; line-height: 1.5rem; left: 5rem; top: 0.5rem; font-size: 0.875rem; color: #999; z-index: 4;}
.caseTop .caseImg{width: 66.25rem; height: 32.25rem; position: absolute; top: 3.875rem; left: 1.25rem; z-index: 3; overflow: hidden;}
.caseTop .caseImg img{width: 66.25rem;  }
.caseTop .caseVr{width: 66.25rem; height: 32.25rem; position: absolute; top: 3.875rem; left: 1.25rem; z-index: 3; overflow: hidden;}

/* caseContent */
.caseContent{ width: 90rem; margin: 5rem auto;}
.caseContent .title{ font-size: 32px; text-align: center; width: 100%; color: #333; font-weight: bold;}
.caseContent .cont{ margin-top: 2.5rem; font-size: 0.875rem; line-height: 1.75rem}


/* caseDetails */
.caseDetails{ width:90rem; text-align: center; padding:0; position: relative; margin:0 auto 0; text-align: center;}
.caseDetails img{ max-width: 100%; margin: 10px 0; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2); -moz-box-shadow:0 0 20px rgba(0,0,0,0.2); box-shadow:0 0 20px rgba(0,0,0,0.2);}


/* suncherWX */
.suncherWX{ text-align: center; width: 100%; position: relative; margin:3.125rem auto; z-index: 4; padding:  0; background: #fff;}
.suncherWX img{ width: 12.5rem; height: 12.5rem;}
.suncherWX p{ font-size: 0.875rem; color: #999; line-height: 26px; margin:15px auto 0; }

/* pageNews */
.pageNews{  width: 90rem; padding: 3% 0; margin: auto; position: relative;}
.pageNews ul,.relatedNews .List ul{ width: 101.61%; margin: 2% -0.805%;}
.pageNews ul li,.relatedNews .List ul li{ float: left; width: 31.72%; margin:  0.805%; position: relative;overflow: hidden;}
.pageNews ul li .img,.relatedNews .List ul li .img{ width: 100%; position: relative; z-index: 1;}
.pageNews ul li .img img,.relatedNews .List ul li .img img{ width: 100%; transition: all 0.3s ease;}
.pageNews ul li .cont,.relatedNews .List ul li .cont{ padding: 4%; width: 92%; position: relative; z-index: 2; background-color: #fff;}
.pageNews ul li .cont .time,.relatedNews .List ul li .cont .time{ font-size: 14px; color: #999;}
.pageNews ul li .cont .title,.relatedNews .List ul li .cont .title{ color: #333; font-size: 18px; margin: 8px 0 13px;}
.pageNews ul li .cont .summary,.relatedNews .List ul li .cont .summary{ font-size: 14px; color: #999; line-height: 26px;}
.pageNews ul li:hover,.relatedNews .List ul li:hover{ -webkit-box-shadow:0 10px 20px rgba(0,0,0,0.1); -moz-box-shadow:0 10px 20px rgba(0,0,0,0.1); box-shadow:0 10px 20px rgba(0,0,0,0.1);}
.pageNews ul li:hover img,.relatedNews .List ul li:hover img{transform:scale(1.2)}
.pageNews ul li:hover .time,.relatedNews .List ul li:hover .time{ color: #666;}
.pageNews ul li:hover .title,.relatedNews .List ul li:hover .title{ color: #ff4229;}
.pageNews ul li:hover .summary,.relatedNews .List ul li:hover .summary{ color: #333;}

/* NewsD */
.NewsDTop{ width: 100%; position: relative; margin: 0;}
.NewsDTop .BgImg{ width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0;}
.NewsDTop .Cont{ width: 100%; padding-top: 15%; position: relative; z-index: 2;}
.NewsDTop .Cont .title{ width: 90rem; margin: auto; font-size: 2rem; color: #fff; padding-bottom: 1.25rem; font-weight: bold; line-height: 46px;}
.NewsDTop .Cont .slogan{ width: 100%; margin: auto; height: 3.125rem; border-top: solid 1px rgba(255, 255, 255, 0.6); color: #fff;}
.NewsDTop .Cont .slogan .cont{ width: 90rem; margin: auto;}
.NewsDTop .Cont .slogan .left{ font-size: 0.875rem; color: #ddd; line-height: 3.125rem;}
.NewsDTop .Cont .slogan .left span{ margin-right: 1.25rem;}
.NewsDTop .Cont .slogan .right{ width: 9.375rem;}
.NewsDTop .Cont .slogan .right .Prev a{ display: block; height: 3.125rem; width: 3.0625rem; border-left: solid 0.0625rem rgba(255, 255, 255, 0.6); position: relative;}
.NewsDTop .Cont .slogan .right .Prev a i:nth-child(1),.NewsDTop .Cont .slogan .right .Prev a i:nth-child(2),.NewsDTop .Cont .slogan .right .Next a i:nth-child(1),.NewsDTop .Cont .slogan .right .Next a i:nth-child(2){ display: block; position: absolute; width: 1rem; height: 0.0625rem; background-color: rgba(255, 255, 255, 0.6); left: 50%; top: 50%; }
.NewsDTop .Cont .slogan .right .Prev a i:nth-child(1){margin: -0.375rem 0 0 -0.5rem; transform: rotate(-40deg); -webkit-transform: rotate(-40deg); -o-transform: rotate(-40deg); -moz-transform: rotate(-40deg);}
.NewsDTop .Cont .slogan .right .Prev a i:nth-child(2){margin: 0.3125rem 0 0 -0.5rem; transform: rotate(40deg); -webkit-transform: rotate(40deg); -o-transform: rotate(40deg); -moz-transform: rotate(40deg);}
.NewsDTop .Cont .slogan .right .List a{ display: block; height: 3.125rem; width: 3rem; border-left: solid 0.0625rem rgba(255, 255, 255, 0.6); border-right: solid 0.0625rem rgba(255, 255, 255, 0.6); position: relative;}
.NewsDTop .Cont .slogan .right .List a i{ width: 0.375rem; height: 0.375rem; background-color: rgba(255, 255, 255, 0.6); position: absolute;}
.NewsDTop .Cont .slogan .right .List a i:nth-child(1){ left: 1rem; top: 1.0625rem;}
.NewsDTop .Cont .slogan .right .List a i:nth-child(2){ right: 1rem; top: 1.0625rem;}
.NewsDTop .Cont .slogan .right .List a i:nth-child(3){ left: 1rem; bottom: 1.0625rem;}
.NewsDTop .Cont .slogan .right .List a i:nth-child(4){ right: 1rem; bottom: 1.0625rem;}
.NewsDTop .Cont .slogan .right .Next a{ display: block; height: 3.125rem; width: 3.0625rem; border-right: solid 0.0625rem rgba(255, 255, 255, 0.6); position: relative;}
.NewsDTop .Cont .slogan .right .Next a i:nth-child(1){ margin: -0.375rem 0 0 -0.5rem; transform: rotate(-140deg); -webkit-transform: rotate(-140deg); -o-transform: rotate(-140deg); -moz-transform: rotate(-140deg);}
.NewsDTop .Cont .slogan .right .Next a i:nth-child(2){margin: 0.3125rem 0 0 -0.5rem; transform: rotate(140deg); -webkit-transform: rotate(140deg); -o-transform: rotate(140deg); -moz-transform: rotate(140deg);}
.NewsDTop .Cont .slogan .right .Prev a i,.NewsDTop .Cont .slogan .right .Next a i{ border-radius: 1px;}
.NewsDTop .Cont .slogan .right .Next a:hover,.NewsDTop .Cont .slogan .right .List a:hover,.NewsDTop .Cont .slogan .right .Prev a:hover{ background-color: #fff;}
.NewsDTop .Cont .slogan .right .Next a:hover i,.NewsDTop .Cont .slogan .right .Next a:hover i,.NewsDTop .Cont .slogan .right .List a:hover i,.NewsDTop .Cont .slogan .right .Prev a:hover i{ background-color: #ff4229;}
.NewsDTop .Cont .slogan .current{ margin-right: 20px; line-height: 3.125rem; font-size: 14px;}
.NewsDTop .Cont .slogan .current a{ color: #ddd;}
.NewsDTop .Cont .slogan .current a:hover{ color: #ff4229; text-decoration: underline;}
.NewsDTop .Cont .slogan .current span{ margin: 0 5px;}

.pageNewsD{ width: 100%; border-bottom: solid 1px #eee;}
.pageNewsD .NewsDC{  width: 90rem; padding: 0 0 ;  margin: auto; position: relative; }
.pageNewsD .NewsD{ width: 70%; position: relative;  overflow: hidden; padding: 4% 4% 4% 0;border-right: solid 1px #eee; box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;   -webkit-appearance: none;}
.pageNewsD .NewsD .cont{ font-size: 14px; color: #333; margin-bottom: 3%; min-height: 250px; line-height: 36px;}
.pageNewsD .NewsD .cont img{ max-width: 100%;}
.pageNewsD .NewsD .keyword{ width: 100%; margin-bottom: 3%;}
.pageNewsD .NewsD .keyword a{ float: left; margin-right: 5px; margin-bottom: 5px; display: block; padding:5px 10px; background-color: #fafafa; color: #999;}
.pageNewsD .NewsD .keyword a:hover{ background-color: #ff4229; color: #fff;}
.pageNewsD .share{ width: 100%; height: 36px; position: relative; z-index: 98;}
.pageNewsD .bdsharebuttonbox{ display:block; position: relative;  padding:  0; width: 100%;  z-index: 98;  }
.pageNewsD .bdsharebuttonbox a{width: 36px;height:36px; float: left; font-size: 14px ; padding: 0; color: #333; line-height: 36px; border-radius: 50%; text-align: center; margin-right: 10px; color: #fff; font-size: 12px; z-index: 98;}
.pageNewsD .bdsharebuttonbox a.bds_sqq{ background:#333 url(../images/share/qq.png) center center no-repeat;}
.pageNewsD .bdsharebuttonbox a.bds_qzone{ background:#333 url(../images/share/qj.png) center center no-repeat;}
.pageNewsD .bdsharebuttonbox a.bds_weixin{ background:#333 url(../images/share/wx.png) center center no-repeat;}
.pageNewsD .bdsharebuttonbox a.bds_tsina{ background:#333 url(../images/share/xl.png) center center no-repeat;}
.pageNewsD .bdsharebuttonbox a:hover{ background-color: #ff4229;}
.pageNewsD .bdsharebuttonbox a.BackToTop{ background: #333; display: block !important;}
.pageNewsD .bdsharebuttonbox a.BackToTop:hover{ background: #ff4229; color: #fff;}
.pageNewsD .rightNews{ width: 30%; padding: 4% 0 4% 4%; border-left: solid 1px #eee; box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;   -webkit-appearance: none; margin-left: -1px;}
.pageNewsD .rightNews .top{ float: left; width: 100%; font-size: 24px; color: #000; font-weight: bold;}
.pageNewsD .rightNews ul{ float: left; width: 100%; margin-top: 30px;}
.pageNewsD .rightNews li{ float: left; width: 100%; margin-bottom: 20px;}
.pageNewsD .rightNews li .title{ font-size: 16px; color: #333; line-height: 26px;}
.pageNewsD .rightNews li .time{ font-size: 14px; color: #999; margin-top: 5px;}
.pageNewsD .rightNews li:hover .title,.pageNewsD .rightNews li:hover .time{ color: #ff4229;}

.pages1{width: 100%; padding: 0 ; margin:30px auto 0; height: 60px; line-height: 60px; position: relative;  z-index: 1;}
.pages1 a{ font-size: 14px; color: #999;}
.pages1 a:hover{ color: #ff4229;}

.relatedNews{  width: 90rem; padding: 3% 0 1%; margin: auto; }
.relatedNews .Top{ font-size: 28px; color: #000;}



/* about01 */
.about01{ width: 90rem; margin:3.75rem auto; position: relative;}
.about01 .aboutc{ float: left; width: 100%;}
.about01 .cont{ width: 51.25rem;}
.about01 .cont .title{ font-size: 2.5rem; width: 100%; color: #000; line-height: 3.25rem; font-weight: bold;}
.about01 .cont .con{ font-size: 14px; width: 100%; line-height: 28px; color: #999;}
.about01 .cont .con p{ margin-top: 15px;}
.about01 .img{ width: 33.4375rem; height: 20rem;}
.about01 .img img{ width: 33.4375rem; height: 20rem;}
.about01 .list{ float: left; width: 100%; text-align: center; margin-top: 5rem;}
.about01 .list dl{ display: inline-block; width: 19.81%;}
.about01 .list dl dt{ width: 60px; height: 50px; margin: auto; transition: 400ms; -webkit-transition: 400ms;transition: 0.4s 0s; -webkit-transition: 0.4s 0s;}
.about01 .list dl dt img{width: 60px; height: 50px;}
.about01 .list dl dt .img1{ display: block;}
.about01 .list dl dt .img2{ display: none;}
.about01 .list dl dd{ font-size: 16px; line-height: 26px; color: #333; margin-top: 15px;}
.about01 .list dl:hover dt { opacity: 1;  transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
.about01 .list dl:hover dt .img2{ display: block;}
.about01 .list dl:hover dt .img1{ display: none;}
.about01 .list dl:hover dd{ color: #ff4229;}



/* about02 */
.about02{ width: 100%; padding: 0 0;  position: relative; overflow: hidden;}
.about02 .Bg{ width: 100%; position: relative; z-index: 1; overflow: hidden;}
.about02 .Bg img{ width: 100%;}
.about02 .cont{ position: absolute; z-index: 2; bottom: 0; left: 0; height: 100%; width:93.75%; padding: 0 ; margin: 0 3.125%;}
.about02 .cont .line{ position: absolute; z-index: 2; height: 32.5rem; background: #fff; width: 50%; right: 0; bottom: 0;}
.about02 .cont .con{ width: 90rem; margin: auto; position: relative; z-index: 3; height: 100%;}
.about02 .cont .con .title{ float: left; width: 45rem; height: 100%;}
.about02 .cont .con .title span{ float: left; font-size: 2.875rem; color: #fff; width: 100%; margin-top: 6.875rem;}
.about02 .cont .con .title p{ float: left; width: 3.75rem; height: 0.25rem; background-color: rgba(255, 255, 255, 0.9); margin-top: 1.5625rem;}
.about02 .cont .con .list{ width: 36.25rem; height: 23.75rem; position: absolute; bottom: 0; right: 0; padding: 4.375rem; background-color: rgba(255,255,255,1);}
.about02 .cont .con .list dl{ float: left; margin-bottom: 30px;}
.about02 .cont .con .list dl dt{ font-size: 1.5rem; color: #333; font-weight: bold;}
.about02 .cont .con .list dl dd{ font-size: 0.875rem; line-height: 1.625rem; color: #999; margin-top: 10px;}
.about02 .cont .con .list p{ width: 0.1875rem; height: 0.625rem;  background-color: #333; position: absolute; top: 4.375rem; right: 4.375rem;}

/* about03 */
.about03{ width: 90rem;  margin: 3.75rem auto; position: relative;}
.about03 dl{ float: left; width: 28.125rem; margin-left: 2.8125rem; position: relative; overflow: hidden;}
.about03 dl:first-child{ margin-left: 0;}
.about03 dl dt{ width: 100%;  position: relative; z-index: 1;}
.about03 dl dt img{ width: 100%;  }
.about03 dl dd{ position: absolute; top: 0; left: 0; width: 80%; height:80%;  background-color: rgba(0, 0, 0, 0.4); z-index: 2; color: #fff; padding: 10%;}
.about03 dl dd .title{ width: 100%; text-align: center; margin-top: 0; font-size: 1.75rem; transform: translateY(6.25rem); transition: all 0.8s ease;}
.about03 dl dd .line{ width: 2.5rem; height: 0.25rem; margin:0 auto; background-color: rgba(255, 255, 255, 0.9); transform: translateY(18.75rem); transition: all 0.8s ease;}
.about03 dl dd .cont{ font-size: 0.875rem; color: #fff; line-height: 1.625rem; transform: translateY(18.75rem); transition: all 0.8s ease;}
.about03 dl:hover .title{ transform: translateY(2.5rem); opacity:1;}
.about03 dl:hover .line{ transform: translateY(3.75rem); opacity:1;}
.about03 dl:hover .cont{ transform: translateY(5rem); opacity:1;}
.about03 dl:hover dd{ background-color: rgba(255, 66, 61, 0.8);}


/* about04 */
.about04{ width: 100%; padding: 0 0; height: 81.25rem; margin: auto; position: relative;
background: #e8e8e8;
background: -moz-linear-gradient(top,  #e8e8e8 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e8e8), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top,  #e8e8e8 0%,#ffffff 100%);
background: -o-linear-gradient(top,  #e8e8e8 0%,#ffffff 100%);
background: -ms-linear-gradient(top,  #e8e8e8 0%,#ffffff 100%);
background: linear-gradient(to bottom,  #e8e8e8 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#ffffff',GradientType=0 );
}
.about04 .bg{ width: 66.875rem; height: 31.25rem; top:0; left: 0; z-index: 0;  position: absolute;}
.about04 .List{ width: 90rem; margin: auto; height: 75rem; position: relative; z-index: 1; padding-top: 6.25rem;}
.about04 .List .img1{ position: absolute; top: 11.25rem ; left: 0; width: 23.125rem; height: 36.875rem;}
.about04 .List .img2{ position: absolute; bottom: 0; left: 0; width: 23.125rem; height: 33.125rem;}
.about04 .List .img3{ position: absolute; top: 11.25rem; left: 23.125rem; width: 28.75rem; height: 30.9375rem;}
.about04 .List .img4{ position: absolute; top: 40rem; left: 23.125rem; width: 28.75rem; height: 35.3125rem;}
.about04 .List .img5{ position: absolute; top: 45rem; right: 0; width: 38.125rem; height: 22.5rem;}
.about04 .List .cont{ position: absolute; top: 5rem; right: 0; height: 32.5rem; background-color: #fff; padding: 3.75rem; width: 30.625rem;}
.about04 .List .cont .title{ float: left; width: 100%; font-size: 2.875rem; color: #000; margin-bottom: 1.25rem;}
.about04 .List .cont .con{ font-size: 1rem; float: left; width: 100%; color: #999; line-height: 1.75rem;}
.about04 .List .cont .con p{ margin-top: 1.25rem;}
.about04 .List .cont .line{ width: 0.3125rem; height: 4.0625rem; background-color: #ff4229; position: absolute; right: 2.5rem; bottom: 5.3125rem;}
.about04 .List .suncher{position: absolute; top: 67.5rem; right: 0;  width: 33.125rem;font-family:'verdana'; line-height: 7.8125rem; font-size: 3.5rem; height:7.8125rem; padding: 0 2.5rem; text-transform: uppercase; color: #e8e8e8; font-weight: bold;}


/* about05 */
.about05{ width: 100%; padding:4.375rem 0; position: relative;  background-color: #f8f8f8;}
.about05List{ width: 84.375rem; overflow:hidden; position:relative; background-color: #fff; padding: 3.75rem 2.8125rem; margin:auto;}
.about05List .title{ width: 100%; margin-bottom: 2rem;}
.about05List .title .left{ font-size: 2.875rem; color: #333;}
.about05List .title .left p{ width: 3.4375rem; height: 0.25rem; margin-top: 2rem; background-color: #bbb;}
.about05List .title .right{ width: 40%; font-size: 0.875rem; line-height: 1.625rem; color: #999;}
.about05List .hd{ overflow:hidden;  padding:0 0;  }
.about05List .hd ul{ text-align: center; overflow:hidden; zoom:1; margin-top:3.125rem; zoom:1; }
.about05List .hd ul li{ display: inline-block;  width:0.75rem ; height:0.75rem; margin: 0 0.5rem; overflow:hidden; border-radius: 50%; background-color: #666; text-indent:-999px; cursor:pointer; }
.about05List .hd ul li.on{ background-color: #ff4229;}
.about05List .bd{ padding:0; width: 100%; overflow: hidden; }
.about05List .bd ul{ overflow:hidden; zoom:1; width: 100%;}
.about05List .bd ul li{ margin-right:30px; width: 315px; float:left; _display:inline; overflow:hidden; text-align:center; }
.about05List .bd ul li .img{ width: 100%;}
.about05List .bd ul li .img img{ width: 100%;}
.about05List .bd ul li .cont{ font-size: 0.875rem; color: #999; margin-top: 1.25rem; letter-spacing: 0.0625rem;}
.about05List .bd ul li .cont p{ font-size: 1.25rem; font-weight: bold; color: #333; text-transform: uppercase;}
.about05List .bd ul li .cont span{ font-family: 'Arial';}

/* about06 */
.about06{ width: 100%; padding: 0 ; margin:3.125rem auto ; position: relative;}
.about06 .title{ width: 100%; text-align: center; font-size: 1rem; color: #999; }
.about06 .title p{ font-size: 2.875rem; color: #333; margin-bottom: 0.625rem; }
.about06 .list{ width: 90rem; margin: 3.125rem auto;}
.about06 .list li{ float: left; width: 20%; margin: 0;}
.about06 .list li img{ width: 100%; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}
.about06 .list li:hover img{  -webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);-ms-filter: grayscale(0%);-o-filter: grayscale(0%);filter: grayscale(0%);filter: gray;}


/* pageContact */
.pageContact{ width: 100%; padding: 0 ; margin:4.375rem auto;}
.pageContact .title{ width: 100%; text-align: center; font-size: 16px; color: #999;}
.pageContact .title p{ font-size: 46px; color: #333; margin-bottom: 10px;}
.pageContact .list{ width: 90rem; margin: 60px auto;}
.pageContact .list dl{ float: left; width: 17%; padding: 0 4%;}
.pageContact .list dl dt{ width: 45px; height: 44px; margin: 0; transition: 400ms; -webkit-transition: 400ms;transition: 0.4s 0s; -webkit-transition: 0.4s 0s;}
.pageContact .list dl:nth-child(1) dt{ background: url(../images/contactIcon1.png) center center no-repeat;}
.pageContact .list dl:nth-child(2) dt{ background: url(../images/contactIcon2.png) center center no-repeat;}
.pageContact .list dl:nth-child(3) dt{ background: url(../images/contactIcon3.png) center center no-repeat;}
.pageContact .list dl:nth-child(4) dt{ background: url(../images/contactIcon4.png) center center no-repeat;}
.pageContact .list dl dd{ width: 100%; text-align: left; margin: 0 auto; font-size: 14px; color: #666; line-height: 26px;}
.pageContact .list dl dd a{ color: #666;}
.pageContact .list dl dd a:hover{ color: #ff4229;}
.pageContact .list dl dd p{ font-size: 20px; font-weight: bold; color: #000; margin: 20px auto 10px;}
.pageContact .list dl:hover dd,.pageContact .list dl:hover dd p{ color: #ff4229;}
.pageContact .list dl:nth-child(1):hover dt{ background: url(../images/contactIcon1-1.png) center center no-repeat;}
.pageContact .list dl:nth-child(2):hover dt{ background: url(../images/contactIcon2-1.png) center center no-repeat;}
.pageContact .list dl:nth-child(3):hover dt{ background: url(../images/contactIcon3-1.png) center center no-repeat;}
.pageContact .list dl:nth-child(4):hover dt{ background: url(../images/contactIcon4-1.png) center center no-repeat;}
.pageContact .list dl:hover dt{ opacity: 1;  transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }



/* pageMap */
.pageMap{ width: 100%; height: 820px; background-color: #f5f5f5; position: relative; min-width: 90rem;}
.pageMap #mapall { height:640px; position: relative; z-index: 1; width: 100%;}
.pageMap .list{ width: 90rem; left: 50%; margin-left: -720px; bottom: 80px; position: absolute; z-index: 2; background-color: #fff; height: 100px; padding: 40px 0; -webkit-box-shadow:0 0 10px rgba(0,0,0,0.05); -moz-box-shadow:0 0 10px rgba(0,0,0,0.05); box-shadow:0 0 10px rgba(0,0,0,0.05);}
.pageMap .list dl{ float: left; width: 24%; height: 60px;  border-left: solid 1px #f5f5f5; padding: 20px 4.5%;}
.pageMap .list dl:first-child{ border-left: 0; }
.pageMap .list dl dt{ float: left; width:88%; line-height: 35px; font-size: 20px; color: #000; font-weight: bold; padding-left: 12%; background: url(../images/car.png) left center no-repeat;}
.pageMap .list dl dd{ float: left; width:88%; padding-left: 12%; margin-top: 8px; line-height: 26px; font-size: 14px; color: #333;}


/* pageForm */
.pageForm{ width: 75rem; padding: 0 ; margin:4.375rem auto;}
.pageForm .title{ text-align: center;  width: 100%; text-align: center; font-size: 14px; color: #999; line-height: 26px;}
.pageForm .title p{ font-size: 32px; color: #333; font-weight: bold;  margin-bottom:20px; }
.pageForm .title span{ color: #ff4229;}

.pageForm .list{ width:75rem; margin:60px auto ; overflow:hidden;}
.pageForm .row{ width:100%; clear:both;  margin:0 0 30px 0;}
.pageForm .row .row_left{ width:570px; float:left; display:block; }
.pageForm .row .row_right{ width:570px; float:right; display:block; }
.pageForm label{ position:relative; display:block; }
.pageForm label span{ position:absolute; left:0; top:20px; font-size:14px; color:#666;}
.pageForm .txt{ border: 0; border-bottom:1px solid #eee; padding:20px 0; background:#fff;}
.pageForm .txt:focus{  border: 0; border-bottom:1px solid #ff4229; padding:20px 0; background:#fff;}
.pageForm .txt.w1{ width:570px; height:20px; line-height:20px;}
.pageForm .txt.w2{ width:75rem; height:100px; line-height:20px;}
.pageForm .btn{ float:right; border:0; background:#ff4229; border-radius:0; width:150px; height:50px; cursor:pointer; text-align:center; font-size:16px;  color:#fff;}
.pageForm .row .btn:hover{ background:#21282e; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease;}
.pageForm .row p.xin{ color:#21282e; line-height:50px; font-size:14px; float:left; color: #999;}
.pageForm .row p.xin span{ color:#ff4229;}


/* pageBrand */
.pageBrand{ width: 90rem; padding: 0  ; margin:4.375rem auto;}
.pageBrand .title{ width: 100%; text-align: center; font-size: 16px; color: #999;}
.pageBrand .title p{ font-size: 46px; color: #333; margin-bottom: 10px;}
.pageBrand .list{ width: 100%; margin: 60px auto 0;}
.pageBrand .list dl{ float: left; width: 33.33%;}
.pageBrand .list dl dt{ width: 76px; height: 78px; margin: auto;  transition: 400ms; -webkit-transition: 400ms;transition: 0.4s 0s; -webkit-transition: 0.4s 0s;}
.pageBrand .list dl:nth-child(1) dt{ background: url(../images/service/brand01.png) center center no-repeat;}
.pageBrand .list dl:nth-child(2) dt{ background: url(../images/service/brand02.png) center center no-repeat;}
.pageBrand .list dl:nth-child(3) dt{ background: url(../images/service/brand03.png) center center no-repeat;}
.pageBrand .list dl dd{ width: 100%; margin: 30px auto 0; font-size: 14px; color: #999; text-align: center; line-height: 24px;}
.pageBrand .list dl dd p{ font-size: 22px; color: #333; font-weight: bold; margin-bottom: 15px;}
.pageBrand .list dl:hover dt{ opacity: 1;  transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }


/* pageProblem */
.pageProblem{ width: 100%; padding: 80px 0; margin: auto; background-color: #f5f5f5;}
.pageProblem .title{width: 90rem; padding: 0  ; margin: auto; text-align: center; font-size: 16px; color: #999;}
.pageProblem .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.pageProblem .list{ width: 1400px; height: 440px; margin:60px auto 0; padding: 20px; background-color: #fff;}
.pageProblem .list li{ float: left; position: relative; width: 350px; height: 440px;}
.pageProblem .list li .img{position: absolute; width: 350px; height: 220px; overflow: hidden;}
.pageProblem .list li img{ width: 350px; height: 220px; transition: all 0.8s ease;}
.pageProblem .list li .cont{position: absolute; text-align: center; width: 260px; padding: 45px; height: 130px; font-size: 14px; color: #999; line-height: 24px;}
.pageProblem .list li .cont p{ font-size: 20px; color: #333; font-weight: bold; margin-bottom: 20px;}
.pageProblem .list li:nth-child(odd) .img{ top: 0; left: 0;}
.pageProblem .list li:nth-child(odd) .cont{ top: 220px; left: 0;}
.pageProblem .list li:nth-child(even) .img{ top: 220px; left: 0;}
.pageProblem .list li:nth-child(even) .cont{ top: 0; left: 0;}
.pageProblem .list li:hover .cont{ background-color: #ff4229; color: #fff;}
.pageProblem .list li:hover .cont p{ color: #fff;}
.pageProblem .list li:hover img{transform:scale(1.2);}


/* pageWork */
.pageWork{ width: 100%; padding: 80px 0 0 0; margin: auto; background: url(../images/BrandBg.jpg) repeat;}
.pageWork .title{width: 90rem; padding: 0 ; margin: auto; text-align: center; font-size: 16px; color: #999;}
.pageWork .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.pageWork .list{ width: 90rem; padding: 0 ; margin: 60px auto 0;}
.pageWork .list .left{ width: 50%; text-align: right;}
.pageWork .list .right{ width: 40%; padding: 0 5%;}
.pageWork .list .right dl{ float: left; width: 100%; margin: 30px 0;}
.pageWork .list .right dl dt{ float: left; width: 36px; height: 36px; border-radius: 50%;}
.pageWork .list .right dl:nth-child(1) dt{ background:#eee url(../images/brand/006.png) center center no-repeat;}
.pageWork .list .right dl:nth-child(2) dt{ background:#eee url(../images/brand/007.png) center center no-repeat;}
.pageWork .list .right dl:nth-child(3) dt{ background:#eee url(../images/brand/008.png) center center no-repeat;}
.pageWork .list .right dl:nth-child(1):hover dt{background:#ff4229 url(../images/brand/006-1.png) center center no-repeat;}
.pageWork .list .right dl:nth-child(2):hover dt{background:#ff4229 url(../images/brand/007-1.png) center center no-repeat;}
.pageWork .list .right dl:nth-child(3):hover dt{background:#ff4229 url(../images/brand/008-1.png) center center no-repeat;}
.pageWork .list .right dl dd{ float: left; font-size: 14px; width: 90%; margin-left: 20px; color: #999;}
.pageWork .list .right dl dd p{ font-size: 18px; color: #333; margin-bottom: 10px;}
.pageWork .list .right dl:hover dd,.pageWork .list .right dl:hover dd p{ color: #ff4229;}


/* pageSolution */
.pageSolution{ width: 100%; padding: 80px 0; height: 500px; background: url(../images/service/service_bg1.jpg) center top no-repeat}
.pageSolution .title{width: 90rem; padding: 0 0; margin: auto; text-align: center;  color: #fff;}
.pageSolution .title p{ font-size: 46px;   margin-bottom: 20px;}
.pageSolution .title span{ font-size: 16px; line-height: 30px;}
.pageSolution .list1{ width: 90rem; margin:60px auto 0; color: #fff;}
.pageSolution .list2{ width: 90rem; margin:0 auto 0; color: #fff;}
.pageSolution .list1 dl,.pageSolution .list2 dl{ float: left; width: 288px; color: #fff; text-align: center;}
.pageSolution .list1 dl dt,.pageSolution .list2 dl dt{ width: 60px; height: 60px; margin: auto; border-radius: 50%; border: solid 2px #fff; overflow: hidden;}
.pageSolution .list1 dl:nth-child(1) dt{ background: url(../images/brand/010.png) center center no-repeat;}
.pageSolution .list1 dl:nth-child(2) dt{ background: url(../images/brand/011.png) center center no-repeat;}
.pageSolution .list1 dl:nth-child(3) dt{ background: url(../images/brand/012.png) center center no-repeat;}
.pageSolution .list1 dl:nth-child(4) dt{ background: url(../images/brand/013.png) center center no-repeat;}
.pageSolution .list1 dl:nth-child(5) dt{ background: url(../images/brand/014.png) center center no-repeat;}
.pageSolution .list2 dl:nth-child(1) dt{ background: url(../images/brand/015.png) center center no-repeat;}
.pageSolution .list2 dl:nth-child(2) dt{ background: url(../images/brand/016.png) center center no-repeat;}
.pageSolution .list2 dl:nth-child(3) dt{ background: url(../images/brand/017.png) center center no-repeat;}
.pageSolution .list2 dl:nth-child(4) dt{ background: url(../images/brand/018.png) center center no-repeat;}
.pageSolution .list2 dl:nth-child(5) dt{ background: url(../images/brand/019.png) center center no-repeat;}
.pageSolution .list1 dl:hover dt,.pageSolution .list2 dl:hover dt{ background-color: #ff4229; border-color: #ff4229;}
.pageSolution .list1 dl:hover,.pageSolution .list2 dl:hover{ color: #ff4229;}
.pageSolution .list1 dl dd,.pageSolution .list2 dl dd{ font-size: 16px; margin-top: 15px;}
.pageSolution .mid{ width: 100%; height: 35px; position: relative; margin:25px auto;}
.pageSolution .mid .line-h{ width: 100%; height: 1px; background-color: #3c3c3c; position: absolute; top: 17px; z-index: 1;}
.pageSolution .mid .line-v{ width: 90rem; margin: auto; position: relative; z-index: 2;}
.pageSolution .mid .line-v p{ float: left; width: 1px; margin:0 143px 0 144px; height: 35px; background-color: #3c3c3c;}


/* RelatedCase */
.RelatedCase{ background-color: #f8f8f8; padding: 80px 0; width: 100%;}
.RelatedCase .title{width: 90rem; padding: 0  ; margin: auto;  font-size: 16px; text-align: center;  color: #999;}
.RelatedCase .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.RelatedCase .list{ width: 90rem; margin: 30px auto 0;}
.RelatedCase .list ul{ width: 102%; margin: 0 -1%;}
.RelatedCase .list ul li{ float: left; width: 31.33%; margin: 1%; position: relative; overflow: hidden;}
.RelatedCase .list ul li .img{ width: 100%; position: relative; z-index: 1;}
.RelatedCase .list ul li .img img{ width: 100%;  transition: all 0.3s ease; }
.RelatedCase .list ul li .cont{ width: 60%; padding: 20% 20%; height: 60%; color: #fff; background-color: rgba(0, 0, 0, 0.4);  position: absolute; top: 0; left: 0; transform: translateY(-101%); transition: all 0.8s ease; z-index: 2; text-align: center;}
.RelatedCase .list ul li .cont .name{ font-size: 24px; font-weight: bold;}
.RelatedCase .list ul li .cont .con{ font-size: 14px; line-height: 24px; margin-top: 20px;}
.RelatedCase .list ul li:hover img{transform:scale(1.2);}
.RelatedCase .list ul li:hover .cont{transform: translateY(0); opacity:1;}
.RelatedCase .more{ text-align: center; width: 100%; margin: 40px auto 0;}
.RelatedCase .more a{ font-size: 16px; color: #333;}
.RelatedCase .more a:hover{ color: #ff4229; text-decoration: underline;}

/* pageAdvantage */
.pageAdvantage{  background-color: #ff4229; padding: 80px 0; width: 100%;}
.pageAdvantage .list{ width: 90rem; margin: 0 auto;}
.pageAdvantage .list dl{ float: left; width: 25%; text-align: center;}
.pageAdvantage .list dl dt{ font-size: 60px; color: #fff; font-weight: bold; position: relative;}
.pageAdvantage .list dl dt span.plus{ font-size: 32px; font-weight: normal;}
.pageAdvantage .list dl dd{ font-size: 18px; color: #fff; }

/* pagePartner */
.pagePartner{ width: 90rem; padding: 80px 0; margin: auto; }
.pagePartner .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.pagePartner .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.pagePartner .list{ width: 100%; margin: 50px auto 0;}
.pagePartner .list li{ float: left; width: 20%;}
.pagePartner .list li .img1{ width: auto;height:100%;margin:0 auto; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray; display: block;}
.pagePartner .list li .img2{ display: none; width: auto;height:100%;margin:0 auto;}
.pagePartner .list li:hover{ background-color: #ffffff;}
.pagePartner .list li:hover .img1{ display: none; }
.pagePartner .list li:hover .img2{ display: block; }


/* VrService */
.VrService{ width: 90rem; padding: 80px 0; margin: auto; }
.VrService .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.VrService .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.VrService .list{ width: 100%; margin-top: 55px;}
.VrService .list dl{ float: left; width: 29.86%; margin-left: 5.21%}
.VrService .list dl:first-child{ margin-left: 0;}
.VrService .list dl dt{ width: 100%;  overflow: hidden;}
.VrService .list dl dt img{ width: 100%; transition: all 0.5s ease; }
.VrService .list dl dd{ width: 100%; font-size: 14px; color: #999; line-height: 24px;}
.VrService .list dl dd p{ font-size: 22px; font-weight: bold; color: #333; margin: 20px 0;}
.VrService .list dl:hover img{transform:scale(1.2);}
.VrService .list dl:hover dd p{ color: #ff4229;}


/* VrSelect */
.VrSelect{ width: 100%; padding: 80px 0; margin: auto; background-color: #f8f8f8;}
.VrSelect .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.VrSelect .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.VrSelect .list{ width: 90rem; margin: 70px auto 0;  }
.VrSelect .list dl{ float: left; width: 20%; padding: 0 2.5%;}
.VrSelect .list dl dt{ width: 70px; height: 70px; transition: 400ms; -webkit-transition: 400ms;transition: 0.4s 0s; -webkit-transition: 0.4s 0s;}
.VrSelect .list dl:nth-child(1) dt{ background: url(../images/vr/004.png) center center no-repeat;}
.VrSelect .list dl:nth-child(2) dt{ background: url(../images/vr/005.png) center center no-repeat;}
.VrSelect .list dl:nth-child(3) dt{ background: url(../images/vr/006.png) center center no-repeat;}
.VrSelect .list dl:nth-child(4) dt{ background: url(../images/vr/007.png) center center no-repeat;}
.VrSelect .list dl dd{ font-size: 14px; color: #999; line-height: 24px; }
.VrSelect .list dl dd p{ font-size: 22px; color: #333; font-weight: bold; margin: 30px 0 25px;}
.VrSelect .list dl:hover dt{ opacity: 1;  transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }


/* VrScenes */
.VrScenes{ width: 100%; padding: 70px 0 80px; height: 720px; margin: auto; background: url(../images/vr/008.jpg) center top no-repeat;}
.VrScenes .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #fff;}
.VrScenes .title p{ font-size: 46px;  margin-bottom: 20px;}
.VrScenes .list{ width: 90rem; margin: 40px auto 0;  }
.VrScenes .list ul{width: 102%; margin: 0 -1% ;}
.VrScenes .list ul li{ float: left; width: 23%; margin: 1%; overflow: hidden;}
.VrScenes .list ul li .img{ float: left; width: 100%; overflow: hidden;}
.VrScenes .list ul li img{ width: 100%; transition: all 0.5s ease; }
.VrScenes .list ul li p{ float: left; width: 100%; height: 36px; line-height: 36px; text-align: center; font-size: 16px; color: #333; background-color: rgba(255, 255, 255, 0.9);}
.VrScenes .list ul li:hover img{transform:scale(1.2);}
.VrScenes .list ul li:hover p{ background-color: rgba(255, 66, 61, 0.9); color: #fff;}


/* VrCase */
.VrCase{ background-color: #f8f8f8; padding: 80px 0; width: 100%;}
.VrCase .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.VrCase .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.VrCase .list{ width: 90rem; margin: 30px auto 0;}
.VrCase .list ul{ width: 102%; margin: 0 -1%;}
.VrCase .list ul li{ float: left; width: 31.33%; margin: 1%; position: relative; overflow: hidden;}
.VrCase .list ul li .img{ width: 100%; position: relative; z-index: 1;}
.VrCase .list ul li .img img{ width: 100%;  transition: all 0.3s ease; }
.VrCase .list ul li .cont{ width: 60%; padding: 0 20%; height: 100%; color: #fff; background-color: rgba(0, 0, 0, 0.4);  position: absolute; top: 0; left: 0; transform: translateY(80%); transition: all 0.8s ease; z-index: 2; overflow: hidden;  text-align: center;}
.VrCase .list ul li .cont .name{ font-size: 22px; line-height: 65px; transform: translateY(0); transition: all 0.8s ease;}
.VrCase .list ul li .cont .icon{ transform: translateY(-300%); transition: all 0.8s ease;}
.VrCase .list ul li:hover .img img{transform:scale(1.2);}
.VrCase .list ul li:hover .cont{transform: translateY(0); opacity:1;}
.VrCase .list ul li:hover .name{transform: translateY(260%); opacity:1;}
.VrCase .list ul li:hover .icon{transform: translateY(140%); opacity:1;}
.VrCase .more{ text-align: center; width: 100%; margin: 40px auto 0;}
.VrCase .more a{ font-size: 16px; color: #333;}
.VrCase .more a:hover{ color: #ff4229; text-decoration: underline;}


/* VrProcess */
.VrProcess{ background-color: #f8f8f8; padding: 80px 0; width: 100%;}
.VrProcess .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.VrProcess .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.VrProcess .list{ width: 90rem; margin: 60px auto 0;}
.VrProcess .list dl{ float: left; width: 180px; position: relative; margin: 0 30px; height: 180px; overflow: hidden; }
.VrProcess .list dl dt{ width: 100%; position: relative; z-index: 1;}
.VrProcess .list dl dt img{ width: 100%;}
.VrProcess .list dl dd{ transform: translateY(140px); height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.6); color: #fff; text-align: center; font-size: 18px; transition: all 0.8s ease; position: absolute; top: 0; left: 0; z-index: 2;}
.VrProcess .list dl dd p{ line-height: 40px; font-size: 18px; transform: translateY(0); transition: all 0.8s ease;}
.VrProcess .list dl:hover dd{transform: translateY(0); opacity:1;}
.VrProcess .list dl:hover dd p{transform: translateY(70px); opacity:1;}


/* WebService */
.WebService{ width: 100% ; padding: 80px 0; margin:0 auto; background:#fff url(../images/web/007.png) center bottom no-repeat; border-bottom: solid 1px #eee;}
.WebService .cont{ width: 90rem; margin:0 auto; }
.WebService .cont .left{ width: 800px; padding-left: 120px; background: url(../images/web/001.png) top left 35px no-repeat;}
.WebService .cont .left .name{ font-size: 46px; color: #333;}
.WebService .cont .left .con{ font-size: 16px; color: #999; line-height: 30px; margin-top: 15px;}
.WebService .cont .left .line{ width: 40px; height: 4px; background-color: #999; margin: 20px 0;}
.WebService .cont .left .item{ width: 100%;}
.WebService .cont .left .item p{ float: left; width: 200px; margin: 10px 0; font-size: 16px; color: #333;}
.WebService .cont .left .item p span{ color: #ff4229;}
.WebService .cont .right{ width: 380px; height: 310px; background: url(../images/web/002.png) center center no-repeat; margin-right: 70px;}
.WebService .list{ width: 90rem; margin: auto;}
.WebService .list dl{ float: left; width: 25%; text-align: center;}
.WebService .list dl dt{ width: 66px; height: 66px; margin: auto;}
.WebService .list dl:nth-child(1) dt{ background: url(../images/web/003.png) center center no-repeat;}
.WebService .list dl:nth-child(2) dt{ background: url(../images/web/004.png) center center no-repeat;}
.WebService .list dl:nth-child(3) dt{ background: url(../images/web/005.png) center center no-repeat;}
.WebService .list dl:nth-child(4) dt{ background: url(../images/web/006.png) center center no-repeat;}
.WebService .list dl dd{ font-size: 14px; color: #999; line-height: 26px;}
.WebService .list dl dd p{ font-size: 18px; color: #333; margin: 25px auto;}


/* Website */
.Website{ width: 100%; padding: 80px 0; margin:0 auto; background:#fff url(../images/web/007.png) center bottom no-repeat; border-bottom: solid 1px #eee;}
.Website .cont{ width: 90rem; margin:0 auto; }
.Website .cont .left{ width: 800px; padding-left: 120px; background: url(../images/web/001.png) top left 35px no-repeat;}
.Website .cont .left .name{ font-size: 46px; color: #333;}
.Website .cont .left .con{ font-size: 16px; color: #999; line-height: 30px; margin-top: 15px;}
.Website .cont .left .line{ width: 40px; height: 4px; background-color: #999; margin: 20px 0;}
.Website .cont .left .item{ width: 100%;}
.Website .cont .left .item p{ float: left; width: 200px; margin: 10px 0; font-size: 16px; color: #333;}
.Website .cont .left .item p span{ color: #ff4229;}
.Website .cont .right{ width: 380px; height: 310px; background: url(../images/web/002.png) center center no-repeat; margin-right: 70px;}
.Website .list{ width: 90rem; margin:80px auto 0;}
.Website .list dl{ float: left; width: 25%; text-align: center;}
.Website .list dl dt{ width: 66px; height: 66px; margin: auto; transition: 400ms; -webkit-transition: 400ms;transition: 0.4s 0s; -webkit-transition: 0.4s 0s;}
.Website .list dl:nth-child(1) dt{ background: url(../images/web/003.png) center center no-repeat;}
.Website .list dl:nth-child(2) dt{ background: url(../images/web/004.png) center center no-repeat;}
.Website .list dl:nth-child(3) dt{ background: url(../images/web/005.png) center center no-repeat;}
.Website .list dl:nth-child(4) dt{ background: url(../images/web/006.png) center center no-repeat;}
.Website .list dl dd{ font-size: 14px; color: #999; line-height: 26px;}
.Website .list dl dd p{ font-size: 18px; color: #333; margin: 25px auto;}
.Website .list dl:hover dt{ opacity: 1;  transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }





/* WebExperience */
.WebExperience{ width: 90rem; margin: auto; padding: 80px 0; }
.WebExperience .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.WebExperience .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.WebExperience .list{ width: 100%; margin: 50px auto 0;}
.WebExperience .list dl{ float: left; width: 25%;}
.WebExperience .list dl dt{ width: 100%;}
.WebExperience .list dl dt img{ width: 100%;}
.WebExperience .list dl dd{ text-align: center; font-size: 14px; color: #999; line-height: 26px;}
.WebExperience .list dl dd p{ font-size: 20px; color: #333; margin: 30px auto 20px;}



/* WebAdvantage */
.WebAdvantage{ width: 100%; padding: 80px 0; margin: auto; background-color: #f8f8f8;}
.WebAdvantage .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.WebAdvantage .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.WebAdvantage .list{ width: 90rem; margin: 50px auto 0;}
.WebAdvantage .list dl{ float: left; width: 252px; padding: 40px 0; height: 220px; position: relative; background-color: #fff; -webkit-box-shadow:0 0 10px rgba(0,0,0,0.05); -moz-box-shadow:0 0 10px rgba(0,0,0,0.05); box-shadow:0 0 10px rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden; position: relative; margin-left: 45px;}
.WebAdvantage .list dl:first-child{ margin-left: 0;}
.WebAdvantage .list dl h1{ width: 100%; height: 100%; position: absolute; background-color: #ff4229; z-index: 1; top: 0; left: 0; transform: translateY(100%); transition: all 0.8s ease;}
.WebAdvantage .list dl dt{ width: 90px; height: 90px; margin: auto; border-radius: 50%; border: solid 2px #ff4229; position: relative; z-index: 2; transition: all 0.8s ease;}
.WebAdvantage .list dl:nth-child(1) dt{ background:#fff url(../images/web/012.png) center center no-repeat;}
.WebAdvantage .list dl:nth-child(2) dt{ background:#fff url(../images/web/013.png) center center no-repeat;}
.WebAdvantage .list dl:nth-child(3) dt{ background:#fff url(../images/web/014.png) center center no-repeat;}
.WebAdvantage .list dl:nth-child(4) dt{ background:#fff url(../images/web/015.png) center center no-repeat;}
.WebAdvantage .list dl:nth-child(5) dt{ background:#fff url(../images/web/016.png) center center no-repeat;}
.WebAdvantage .list dl dd{ text-align: center; font-size: 14px; color: #999; line-height: 26px; position: relative; z-index: 2; transition: all 0.8s ease;}
.WebAdvantage .list dl dd p{ font-size: 20px; margin: 25px auto 10px; color: #333;}
.WebAdvantage .list dl:hover h1{ transform: translateY(0); opacity: 1;}
.WebAdvantage .list dl:hover dd,.WebAdvantage .list dl:hover dd p{ color: #fff;}
.WebAdvantage .list dl:hover dt{ border-color: #fff;}

/* WebProcess */
.WebProcess{ width: 100%; padding: 80px 0; margin: auto; background: #f9f9f9 url(../images/web/021.png) right bottom 150px no-repeat;}
.WebProcess .left{ width: 320px; padding-left: 40px;}
.WebProcess .left .name{ font-size: 60px; color: #333;}
.WebProcess .left .cont{ font-size: 16px; line-height: 30px; color: #999; margin-top: 15px;}
.WebProcess .left .list{ width: 100%; margin-top: 40px;}
.WebProcess .left .list dl{ float: left; width: 100%; margin: 10px 0;}
.WebProcess .left .list dl dt{ float: left; width: 30px; height: 30px; margin-right: 25px;}
.WebProcess .left .list dl:nth-child(1) dt{ background: url(../images/web/022.png) center center no-repeat;}
.WebProcess .left .list dl:nth-child(2) dt{ background: url(../images/web/023.png) center center no-repeat;}
.WebProcess .left .list dl:nth-child(3) dt{ background: url(../images/web/024.png) center center no-repeat;}
.WebProcess .left .list dl:nth-child(4) dt{ background: url(../images/web/025.png) center center no-repeat;}
.WebProcess .left .list dl:nth-child(5) dt{ background: url(../images/web/026.png) center center no-repeat;}
.WebProcess .left .list dl:nth-child(6) dt{ background: url(../images/web/027.png) center center no-repeat;}
.WebProcess .left .list dl dd{ float: right; width: 265px; font-size: 14px; color: #999; line-height: 30px;}
.WebProcess .left .list dl dd p{ font-size: 18px; color: #333;}
.WebProcess .left .list dl:nth-child(1):hover dt{ background: url(../images/web/022-1.png) center center no-repeat;}
.WebProcess .left .list dl:nth-child(2):hover dt{ background: url(../images/web/023-1.png) center center no-repeat;}
.WebProcess .left .list dl:nth-child(3):hover dt{ background: url(../images/web/024-1.png) center center no-repeat;}
.WebProcess .left .list dl:nth-child(4):hover dt{ background: url(../images/web/025-1.png) center center no-repeat;}
.WebProcess .left .list dl:nth-child(5):hover dt{ background: url(../images/web/026-1.png) center center no-repeat;}
.WebProcess .left .list dl:nth-child(6):hover dt{ background: url(../images/web/027-1.png) center center no-repeat;}
.WebProcess .left .list dl:hover dd,.WebProcess .left .list dl:hover dd p{ color: #ff4229;}
.WebProcess .right{ margin: 60px 0 0 0; width: 920px; height: 560px; background: url(../images/web/020.png) center center no-repeat;}
.WebProcess .right1{ margin: 60px 0 0 0; width: 920px; height: 560px; background: url(../images/web/020-1.png) center center no-repeat;}




/* Applets */
.Applets{ width: 100%; padding: 80px 0; margin: auto; background: #fff url(../images/app/001.png) center bottom no-repeat;}
.Applets .top{ width: 100%;}
.Applets .top .left{ margin-left: 110px; width: 530px; height: 410px; background: url(../images/app/002.png) center center no-repeat;}
.Applets .top .right{ width: 400px; margin-right: 200px;}
.Applets .top .right .name{ font-size: 46px; color: #333;}
.Applets .top .right .cont{ font-size: 16px; color: #999; margin: 30px auto 40px;}
.Applets .top .right .item{ width: 100%;}
.Applets .top .right .item dl{ float: left; width: 100%; margin: 15px 0;}
.Applets .top .right .item dl dt{ float: left; width: 15px; height: 15px; border-radius: 50%; border: solid 1px #ff4229; background: url(../images/app/003.png) center center no-repeat;}
.Applets .top .right .item dl dd{ float: left; margin-left: 9px; width: 360px; font-size: 14px; color: #333; line-height: 16px;}
.Applets .list{ width: 100%; margin: 60px auto 0;}
.Applets .list dl{ float: left; width: 25%; text-align: center;}
.Applets .list dl dt{ width: 62px; height: 62px; margin: auto; transition: 400ms; -webkit-transition: 400ms;transition: 0.4s 0s; -webkit-transition: 0.4s 0s;}
.Applets .list dl:nth-child(1) dt{ background: url(../images/app/004.png) center center no-repeat;}
.Applets .list dl:nth-child(2) dt{ background: url(../images/app/005.png) center center no-repeat;}
.Applets .list dl:nth-child(3) dt{ background: url(../images/app/006.png) center center no-repeat;}
.Applets .list dl:nth-child(4) dt{ background: url(../images/app/007.png) center center no-repeat;}
.Applets .list dl dd{ font-size: 14px; color: #999; line-height: 26px;}
.Applets .list dl dd p{ font-size: 18px; color: #333; margin: 20px auto;}
.Applets .list dl:hover dt{ opacity: 1;  transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }




/* AppChannel */
.AppChannel{ width: 100%; padding: 80px 0; background-color: #f8f8f8; margin: auto;}
.AppChannel .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.AppChannel .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.AppChannel .list{ width: 90rem; margin:50px auto 0;}
.AppChannel .list dl{ float: left; width: 420px; height: 540px; margin-left: 90px; position: relative; -webkit-box-shadow:0 0 10px rgba(0,0,0,0.05); -moz-box-shadow:0 0 10px rgba(0,0,0,0.05); box-shadow:0 0 10px rgba(0,0,0,0.05);}
.AppChannel .list dl:first-child{ margin-left: 0;}
.AppChannel .list dl dt{ width: 100%; height: 255px; position: relative; overflow: hidden;}
.AppChannel .list dl dt img{ width: 100%;}
.AppChannel .list dl dd{ width: 100%; height: 205px; position: absolute; bottom: 0; left: 0; text-align: center; padding: 40px 0; background-color: #fff; transition: all 0.8s ease;}
.AppChannel .list dl dd .name{ font-size: 24px; color: #333;}
.AppChannel .list dl dd .cont{ font-size: 14px; color: #999; line-height: 26px; margin: 15px auto 30px;}
.AppChannel .list dl dd .more{ width: 168px; margin:0 auto 0; height: 44px; border: solid 1px #ff4229; text-align: center; line-height: 44px;}
.AppChannel .list dl dd .more a{ display: block; font-size: 16px; color: #ff4229;}
.AppChannel .list dl:hover dd{ height: 250px;}
.AppChannel .list dl .more a:hover{ background-color: #ff4229; color: #fff;}


/* AppAdvantage */
.AppAdvantage{ width: 100%; padding: 80px 0; margin: auto; border-bottom: solid 1px #eee;}
.AppAdvantage .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.AppAdvantage .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.AppAdvantage .title span{ line-height: 30px;}
.AppAdvantage .list{ width: 90rem; margin: 40px auto 0;}
.AppAdvantage .list dl{ float: left; width: 20%; border-top: solid 5px #fff; padding:30px 2.5%; margin: 5px 0;}
.AppAdvantage .list dl dt{ font-size: 20px; color: #333; font-weight: bold; line-height: 30px;}
.AppAdvantage .list dl dt span{ font-size: 24px; color: #ff4229; margin-right: 10px;}
.AppAdvantage .list dl dd{ font-size: 14px; color: #999; line-height: 24px; margin-top: 10px;}
.AppAdvantage .list dl:hover{ border-top-color: #ff4229; -webkit-box-shadow:0 0 10px rgba(0,0,0,0.05); -moz-box-shadow:0 0 10px rgba(0,0,0,0.05); box-shadow:0 0 10px rgba(0,0,0,0.05);}


/* AppApplication */
.AppApplication{ width: 100%; padding: 80px 0 0; margin: auto; }
.AppApplication .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.AppApplication .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.AppApplication .title span{ line-height: 30px;}
.AppApplication .list{ width: 100%; margin: 40px auto 0;}
.AppApplication .list dl{ float: left; width: 25%; position: relative; overflow: hidden;}
.AppApplication .list dl dt{ width: 100%; position: relative; z-index: 1;}
.AppApplication .list dl dt img{ width: 100%;}
.AppApplication .list dl dd{ width: 100%; height: 100%; padding: 0 ; position: absolute; top: 0; left: 0; text-align: center; z-index: 2; background-color: rgba(0, 0, 0, 0.6); color: #fff;}
.AppApplication .list dl dd .name{ font-size: 30px; line-height: 30px; margin-top: -15px;  position: absolute; top:50%; width: 100%; left: 0; transition: all 0.8s ease;}
.AppApplication .list dl dd .line{ width: 30px; height: 4px; background-color: #fff; position: absolute; margin:0 0 0 -15px ; left: 50%; top: 100%;transition: all 0.8s ease;}
.AppApplication .list dl dd .cont{ width: 100%; position: absolute; left: 0; top: 110%;  font-size: 16px; color: #eee; transition: all 0.8s ease;}
.AppApplication .list dl:hover dd{ background-color: rgba(255, 66, 61, 0.9);}
.AppApplication .list dl:hover .name{ top: 40%;}
.AppApplication .list dl:hover .line{ top: 50%}
.AppApplication .list dl:hover .cont{ top: 55%}


/* AppScenes */
.AppScenes{ width: 100%; padding: 80px 0; background-color: #f8f8f8; margin: auto;}
.AppScenes .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.AppScenes .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.AppScenes .list{ width: 90rem; margin: 60px auto 0;}
.AppScenes .list dl{ float: left; width: 20%; padding:50px 2.5% 0; height: 230px; margin: 5px 0;}
.AppScenes .list dl dt{ width: 50px;  height: 50px; margin: auto; position: relative; transition: 400ms; -webkit-transition: 400ms;transition: 0.4s 0s; -webkit-transition: 0.4s 0s;}
.AppScenes .list dl:nth-child(1) dt{ background: url(../images/app/023.png) center center no-repeat;}
.AppScenes .list dl:nth-child(2) dt{ background: url(../images/app/024.png) center center no-repeat;}
.AppScenes .list dl:nth-child(3) dt{ background: url(../images/app/025.png) center center no-repeat;}
.AppScenes .list dl:nth-child(4) dt{ background: url(../images/app/026.png) center center no-repeat;}
.AppScenes .list dl:nth-child(5) dt{ background: url(../images/app/027.png) center center no-repeat;}
.AppScenes .list dl:nth-child(6) dt{ background: url(../images/app/028.png) center center no-repeat;}
.AppScenes .list dl:nth-child(7) dt{ background: url(../images/app/029.png) center center no-repeat;}
.AppScenes .list dl:nth-child(8) dt{ background: url(../images/app/030.png) center center no-repeat;}
.AppScenes .list dl dd{ width: 100%; font-size: 14px; color: #999; line-height: 24px; text-align: center; }
.AppScenes .list dl dd p{ font-size: 26px; color: #333; margin: 25px auto;}
.AppScenes .list dl:hover{ background-color: #fff; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.02); -moz-box-shadow:0 0 15px rgba(0,0,0,0.02); box-shadow:0 0 15px rgba(0,0,0,0.02);}
.AppScenes .list dl:hover p{ color: #ff4229;}
.AppScenes .list dl:hover dt{  opacity: 1;  transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
.AppScenes .list dl:nth-child(1):hover dt{ background: url(../images/app/023-1.png) center center no-repeat;}
.AppScenes .list dl:nth-child(2):hover dt{ background: url(../images/app/024-1.png) center center no-repeat;}
.AppScenes .list dl:nth-child(3):hover dt{ background: url(../images/app/025-1.png) center center no-repeat;}
.AppScenes .list dl:nth-child(4):hover dt{ background: url(../images/app/026-1.png) center center no-repeat;}
.AppScenes .list dl:nth-child(5):hover dt{ background: url(../images/app/027-1.png) center center no-repeat;}
.AppScenes .list dl:nth-child(6):hover dt{ background: url(../images/app/028-1.png) center center no-repeat;}
.AppScenes .list dl:nth-child(7):hover dt{ background: url(../images/app/029-1.png) center center no-repeat;}
.AppScenes .list dl:nth-child(8):hover dt{ background: url(../images/app/030-1.png) center center no-repeat;}





/* AppProcess */
.AppProcess{ padding: 80px 0; width: 100%; margin:  auto;}
.AppProcess .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.AppProcess .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.AppProcess .list{ width: 90rem; margin: 60px auto 0;}
.AppProcess .list dl{ float: left; width: 165px;}
.AppProcess .list dl dt{ width: 100px; height: 100px; border-radius: 50%; margin: auto;}
.AppProcess .list dl:nth-child(1) dt{ background:#333 url(../images/app/031.png) center center no-repeat;}
.AppProcess .list dl:nth-child(3) dt{ background:#333 url(../images/app/032.png) center center no-repeat;}
.AppProcess .list dl:nth-child(5) dt{ background:#333 url(../images/app/033.png) center center no-repeat;}
.AppProcess .list dl:nth-child(7) dt{ background:#333 url(../images/app/034.png) center center no-repeat;}
.AppProcess .list dl:nth-child(9) dt{ background:#333 url(../images/app/035.png) center center no-repeat;}
.AppProcess .list dl:nth-child(11) dt{ background:#333 url(../images/app/036.png) center center no-repeat;}
.AppProcess .list dl dd{ width: 100%; text-align: center; font-size: 16px; color: #333; margin: 20px auto 0;}
.AppProcess .list dl:hover dd{ color: #ff4229;}
.AppProcess .list dl:nth-child(1):hover dt{ background:#ff4229 url(../images/app/031.png) center center no-repeat;}
.AppProcess .list dl:nth-child(3):hover dt{ background:#ff4229 url(../images/app/032.png) center center no-repeat;}
.AppProcess .list dl:nth-child(5):hover dt{ background:#ff4229 url(../images/app/033.png) center center no-repeat;}
.AppProcess .list dl:nth-child(7):hover dt{ background:#ff4229 url(../images/app/034.png) center center no-repeat;}
.AppProcess .list dl:nth-child(9):hover dt{ background:#ff4229 url(../images/app/035.png) center center no-repeat;}
.AppProcess .list dl:nth-child(11):hover dt{ background:#ff4229 url(../images/app/036.png) center center no-repeat;}
.AppProcess .list p{ float: left; width: 90px; height: 49px; border-bottom: dotted 1px #333;}


/* AppCase */
.AppCase{ padding: 80px 0; width: 100%; margin:  auto; background-color: #f8f8f8;}
.AppCase .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.AppCase .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.AppCase .title span{ line-height: 30px;}
.AppCase .list{ width: 90rem; margin: 50px auto;}
.AppCase .list dl{ float: left; margin-left: 30px; overflow: hidden; width: 460px;}
.AppCase .list dl a{ display: block;}
.AppCase .list dl:first-child{ margin-left: 0;}
.AppCase .list dl dt{ width: 100%;}
.AppCase .list dl dt img{ width: 100%;}
.AppCase .list dl dd{ width: 360px; height: 120px; overflow: hidden; background-color: #fff; text-align: center; padding: 20px 50px;}
.AppCase .list dl dd .name{ font-size: 24px; color: #333; font-weight: bold;}
.AppCase .list dl dd .cont{ font-size: 14px; color: #999; margin: 15px auto;}
.AppCase .more{ text-align: center; width: 100%; margin: 40px auto 0;}
.AppCase .more a{ font-size: 16px; color: #333;}
.AppCase .more a:hover{ color: #ff4229; text-decoration: underline;}


/* MobileProspect */
.MobileProspect{ width: 90rem; padding: 80px 0; margin: auto;}
.MobileProspect .left{ width: 580px; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.05); -moz-box-shadow:0 0 15px rgba(0,0,0,0.05); box-shadow:0 0 15px rgba(0,0,0,0.05); margin-left: 20px;}
.MobileProspect .left .name{ padding: 20px; width: 540px;}
.MobileProspect .left .name p{ font-size: 20px; color: #333; font-weight: bold; margin-bottom: 15px;}
.MobileProspect .left .name span{ font-size: 14px; color: #999;}
.MobileProspect .left .img{ width: 540px; margin: 0 20px;}
.MobileProspect .left .img img{ width: 100%;}
.MobileProspect .left .cont{ width: 540px; background-color: #fbf1f1; margin: 25px auto 0; height: 40px; padding: 0 20px;}
.MobileProspect .left .cont dl{ float: left; height: 40px; margin-right: 40px;}
.MobileProspect .left .cont dl dt{ float: left; width: 8px; height: 8px; border-radius: 50%; margin:16px 10px 16px 0;}
.MobileProspect .left .cont dl:nth-child(1) dt{ background-color: #a49593;}
.MobileProspect .left .cont dl:nth-child(2) dt{ background-color: #edb7b7;}
.MobileProspect .left .cont dl dd{ float: left; font-size: 14px; color: #333; line-height: 40px;}
.MobileProspect .right{ width: 660px;}
.MobileProspect .right .name{ font-size: 46px; color: #333;}
.MobileProspect .right .line{ width: 40px; height: 4px; margin: 20px 0; background-color: #999;}
.MobileProspect .right .cont{ font-size: 16px; color: #999;}
.MobileProspect .right .info{ font-size: 32px; font-weight: bold; margin-top: 30px; color: #333; line-height: 56px;}
.MobileProspect .right .info span{ color: #ff4229;}



/* MobileWhy */
.MobileWhy{ width: 100%; padding: 80px 0; margin: auto; background-color: #f8f8f8;}
.MobileWhy .left{ width: 600px; margin-left: 60px;}
.MobileWhy .left .name{ font-size: 46px; color: #333;}
.MobileWhy .left .cont{ font-size: 16px; color: #999; margin: 20px auto 30px;}
.MobileWhy .left .list{ font-size: 16px; line-height: 36px;}
.MobileWhy .left .list p{ margin-bottom: 35px;}
.MobileWhy .left .list p:nth-child(1){ color: #666;}
.MobileWhy .left .list p:nth-child(2){ color: #ff4229;}
.MobileWhy .right{ margin-right: 60px; padding-right: 120px; position: relative; height: 470px; width: 600px; background: url(../images/mobile/003.png) center right no-repeat;}
.MobileWhy .right .img{ width: 240px; height: 470px; position: relative; z-index: 2; float: right; background: url(../images/mobile/002.png) center center no-repeat;}
.MobileWhy .right .list{ position: absolute; right: 358px; top:70px; }
.MobileWhy .right .list p{ float: right; height: 50px; border-top-left-radius: 25px; border-bottom-left-radius: 25px;  overflow: hidden; line-height: 50px; font-size: 16px; color: #fff; margin: 15px 0; transition: all 0.8s ease;padding:0 25px; width: 135px;}
.MobileWhy .right .list p:nth-child(1){ background-color: #f0a161; }
.MobileWhy .right .list p:nth-child(2){ background-color: #56b9ec; }
.MobileWhy .right .list p:nth-child(3){ background-color: #f5608a; }
.MobileWhy .right .list p:nth-child(4){ background-color: #ff4229; }
.MobileWhy .right .list p:hover{  width: 200px;}


/* MobileAdvantage */
.MobileAdvantage{ width: 90rem; margin: 80px auto; padding: 0; position: relative;}
.MobileAdvantage .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.MobileAdvantage .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.MobileAdvantage .list{ width: 100%; margin: 50px auto;}
.MobileAdvantage .list dl{ float: left; width: 20%; text-align: center;}
.MobileAdvantage .list dl dt{ width: 66px; height: 62px; margin: auto;  transition: 400ms; -webkit-transition: 400ms;transition: 0.4s 0s; -webkit-transition: 0.4s 0s;}
.MobileAdvantage .list dl:nth-child(1) dt{ background: url(../images/mobile/004.png) center center no-repeat;}
.MobileAdvantage .list dl:nth-child(2) dt{ background: url(../images/mobile/005.png) center center no-repeat;}
.MobileAdvantage .list dl:nth-child(3) dt{ background: url(../images/mobile/006.png) center center no-repeat;}
.MobileAdvantage .list dl:nth-child(4) dt{ background: url(../images/mobile/007.png) center center no-repeat;}
.MobileAdvantage .list dl:nth-child(5) dt{ background: url(../images/mobile/008.png) center center no-repeat;}
.MobileAdvantage .list dl dd{ font-size: 14px; color: #999; line-height: 24px;}
.MobileAdvantage .list dl dd p{ font-size: 18px; color: #333; margin: 20px auto;}
.MobileAdvantage .list dl:hover dt{opacity: 1;  transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }


/* MobileCase */
.MobileCase{ width: 100%; margin:  auto; background-color: #f8f8f8; padding:80px 0; position: relative;}
.MobileCase .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.MobileCase .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.MobileCase .list{ width: 90rem; margin:70px auto 0;}
.MobileCase .list dl{ float: left; margin: 0 30px; width: 300px; height: 570px; overflow: hidden; background: url(../images/mobile/009.png) center center no-repeat; position: relative;}
.MobileCase .list dl dd{ width: 264px; height: 444px; margin: 66px 18px 60px 17px; position: relative; overflow: hidden;}
.MobileCase .list dl img.img1{ width: 264px; height: 444px; margin: 0; position: relative; z-index: 1;}
.MobileCase .list dl p{ width: 180px; height: 180px; padding:42px 42px; position: absolute; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 2; transform: translateY(264px); transition: all 0.8s ease;}
.MobileCase .list dl p img{ width: 180px; height: 180px;}
.MobileCase .list dl a{ display: block;}
.MobileCase .list dl:hover p{transform: translateY(0); opacity:1;}
.MobileCase .more{ text-align: center; width: 100%; margin: 40px auto 0;}
.MobileCase .more a{ font-size: 16px; color: #333;}
.MobileCase .more a:hover{ color: #ff4229; text-decoration: underline;}



/* MarketingPlanning */
.MarketingPlanning{ width: 90rem; margin: auto; padding: 80px 0; position: relative;}
.MarketingPlanning .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.MarketingPlanning .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.MarketingPlanning .title span{ line-height: 30px;}
.MarketingPlanning .list{ width: 100%; margin: 50px auto 0;}
.MarketingPlanning .list dl{ float: left; text-align: center; padding: 40px 70px; width: 300px; margin: 0 20px; height: 230px; background-color: #fff; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.05); -moz-box-shadow:0 0 15px rgba(0,0,0,0.05); box-shadow:0 0 15px rgba(0,0,0,0.05);}
.MarketingPlanning .list dl dt{ width: 52px; height: 58px; margin: auto;}
.MarketingPlanning .list dl:nth-child(1) dt{ background: url(../images/marketing/001.png) center center no-repeat;}
.MarketingPlanning .list dl:nth-child(2) dt{ background: url(../images/marketing/002.png) center center no-repeat;}
.MarketingPlanning .list dl:nth-child(3) dt{ background: url(../images/marketing/003.png) center center no-repeat;}
.MarketingPlanning .list dl dd{ width: 100%; text-align: center; font-size: 14px; color: #999; line-height: 24px;}
.MarketingPlanning .list dl dd p{ font-size: 22px; color: #333; font-weight: bold; margin: 25px auto;}
.MarketingPlanning .list dl:hover{ background-color: #ff4229;}
.MarketingPlanning .list dl:nth-child(1):hover dt{ background: url(../images/marketing/001-1.png) center center no-repeat;}
.MarketingPlanning .list dl:nth-child(2):hover dt{ background: url(../images/marketing/002-1.png) center center no-repeat;}
.MarketingPlanning .list dl:nth-child(3):hover dt{ background: url(../images/marketing/003-1.png) center center no-repeat;}
.MarketingPlanning .list dl:hover dd,.MarketingPlanning .list dl:hover dd p{ color: #fff;}

.MarketingPlanning .cont{ width: 100%; text-align: center; margin: 60px auto ;}
.MarketingPlanning .cont p{ font-size: 32px; font-weight: bold; color: #333; margin-bottom: 25px;}
.MarketingPlanning .cont span{ font-size: 16px; color: #333;}
.MarketingPlanning .more{ width: 510px; padding-left: 150px;  margin: auto; height: 80px; line-height: 80px; background: url(../images/marketing/004.png) center right 150px no-repeat; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.05); -moz-box-shadow:0 0 15px rgba(0,0,0,0.05); box-shadow:0 0 15px rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;}
.MarketingPlanning .more a{ display: block; font-size: 22px; color: #333; font-weight: bold;}
.MarketingPlanning .more:hover{background: url(../images/marketing/004.png) center right 150px no-repeat; -webkit-box-shadow:0 0 15px rgba(255, 66, 61, 0.2); -moz-box-shadow:0 0 15px rgba(255, 66, 61, 0.2); box-shadow:0 0 15px rgba(255, 66, 61, 0.2);}
.MarketingPlanning .more:hover a{ color: #ff4229;}


/* MarketingWhy */
.MarketingWhy{ width: 100%; margin: auto; padding: 80px 0; background-color: #f8f8f8; position: relative;}
.MarketingWhy .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.MarketingWhy .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.MarketingWhy .cont{ width: 90rem; margin: 60px auto 0;}
.MarketingWhy .cont .left{ width: 470px; margin-left: 50px;}
.MarketingWhy .cont .left dl{ float: left; width: 100%; margin: 15px 0;}
.MarketingWhy .cont .left dl dt{ float: left; width: 40px; height: 35px;}
.MarketingWhy .cont .left dl:nth-child(1) dt{ background: url(../images/marketing/005.png) center center no-repeat;}
.MarketingWhy .cont .left dl:nth-child(2) dt{ background: url(../images/marketing/006.png) center center no-repeat;}
.MarketingWhy .cont .left dl:nth-child(3) dt{ background: url(../images/marketing/007.png) center center no-repeat;}
.MarketingWhy .cont .left dl:nth-child(4) dt{ background: url(../images/marketing/008.png) center center no-repeat;}
.MarketingWhy .cont .left dl:nth-child(5) dt{ background: url(../images/marketing/009.png) center center no-repeat;}
.MarketingWhy .cont .left dl dd{ float: left; margin-left: 15px; width: 415px; font-size: 14px; color: #999; line-height: 24px;}
.MarketingWhy .cont .left dl dd p{ font-size: 18px; color: #333;}
.MarketingWhy .cont .left dl:hover dd,.MarketingWhy .cont .left dl:hover dd p{ color: #ff4229;}
.MarketingWhy .cont .right{ width: 640px; height: 510px; overflow: hidden; background: url(../images/marketing/010.png) center center no-repeat; margin-right: 50px;}


/* MarketingProblem */
.MarketingProblem{ width: 90rem; margin: auto; padding: 80px 0; position: relative;}
.MarketingProblem .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #999;}
.MarketingProblem .title p{ font-size: 46px; color: #333;  margin-bottom: 20px;}
.MarketingProblem .list{ margin: 50px auto; width: 100%;}
.MarketingProblem .list dl{ float: left; width: 458px; padding: 45px 0; text-align: center; border: solid 1px #eee;  height: 218px; margin-left: 30px; border-radius: 5px; overflow: hidden;}
.MarketingProblem .list dl:first-child{ margin-left: 0;}
.MarketingProblem .list dl dt{ width: 125px; height: 134px; margin: auto; transition: 400ms; -webkit-transition: 400ms;transition: 0.4s 0s; -webkit-transition: 0.4s 0s;}
.MarketingProblem .list dl:nth-child(1) dt{  background: url(../images/marketing/011.png) center center no-repeat;}
.MarketingProblem .list dl:nth-child(2) dt{  background: url(../images/marketing/012.png) center center no-repeat;}
.MarketingProblem .list dl:nth-child(3) dt{  background: url(../images/marketing/013.png) center center no-repeat;}
.MarketingProblem .list dl dd{ font-size: 18px; color: #666; margin-top: 10px;}
.MarketingProblem .list dl dd span{ font-size: 46px; color: #ff4229; margin-right: 10px;}
.MarketingProblem .list dl:hover{ border-color: #ff4229;}
.MarketingProblem .list dl:hover dt{ opacity: 1;  transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }



/* MarketingProvide */
.MarketingProvide{ width: 100%; padding:80px 0 ; height: 600px; background: url(../images/marketing/014.jpg) center center no-repeat; margin: auto; position: relative;}
.MarketingProvide .title{width: 100%; padding: 0  ; font-size: 16px; text-align: center;  color: #fff;}
.MarketingProvide .title p{ font-size: 46px;  margin-bottom: 20px;}
.MarketingProvide .cont{ width: 85rem; margin:50px auto; background-color: #fff; height: 370px; padding: 40px;}
.MarketingProvide .cont .img{ width: 600px; height: 370px; overflow: hidden;}
.MarketingProvide .cont .img img{ width: 100%;}
.MarketingProvide .cont .info{ width: 680px;}
.MarketingProvide .cont .info dl{ float: left; width: 100%; margin: 30px 0;}
.MarketingProvide .cont .info dl dt{ float: left; width: 50px; font-size: 36px; padding-bottom: 10px; color: #ff4229; font-family: 'Agency'; text-align: center ; background: url(../images/marketing/016.png) right bottom no-repeat;  font-style:oblique;}
.MarketingProvide .cont .info dl dd{ float: left; width: 610px; font-size: 14px; margin-left: 20px; color: #999; line-height: 24px;}
.MarketingProvide .cont .info dl dd p{ font-size: 20px; color: #333; margin-bottom: 10px;}



/* kefu */
.main_kefu {top:50%; width: 61px; position:fixed; right:0; height: 360px; margin-top: -180px; z-index:99; background-color: #fff; }
.main_kefu dl{ float: left; width: 100%; height: 60px; border-bottom: solid 1px #eee; border-left: solid 1px #eee; position: relative; z-index: 2;}
.main_kefu dl:first-child{ border-top: solid 1px #eee; }
.main_kefu dl dt{ width: 60px; height: 60px; background:#fff url(../images/kefuIcon.png) no-repeat; cursor: pointer; position: relative; z-index: 5;}
.main_kefu dl dt a{ display: block; width: 60px; height: 60px;}
.main_kefu dl.icon1 dt{ background-position: 0 0; }
.main_kefu dl.icon2 dt{ background-position: -60px 0; }
.main_kefu dl.icon3 dt{ background:#ff4229 url(../images/kefuIcon.png) no-repeat; background-position: -120px -60px; }
.main_kefu dl.icon4 dt{ background-position: -180px 0; }
.main_kefu dl.icon5 dt{ background-position: -240px 0; }
.main_kefu dl.icon6 dt{ background-position: -300px 0; }
.main_kefu dl:hover dt{ background:#ff4229 url(../images/kefuIcon.png) no-repeat;}
.main_kefu dl.icon1:hover dt{ background-position: 0 -60px; }
.main_kefu dl.icon2:hover dt{ background-position: -60px -60px; }
.main_kefu dl.icon3:hover dt{ background-position: -120px -60px; }
.main_kefu dl.icon4:hover dt{ background-position: -180px -60px; }
.main_kefu dl.icon5:hover dt{ background-position: -240px -60px; }
.main_kefu dl.icon6:hover dt{ background-position: -300px -60px; }

.main_kefu dl.icon2 dd{ width: 150px; height: 150px; transition: all 0.5s ease; position: absolute; top: 0; right: -213px; z-index: 1;}
.main_kefu dl.icon2 dd img{ width: 150px; height: 150px; border: solid 1px #eee;}
.main_kefu dl.icon2:hover dd,.main_kefu dl.icon3:hover dd,.main_kefu dl.icon4:hover dd{ right: 61px;}
.main_kefu dl.icon3 dd{ width: 130px; border: solid 1px #eee; transition: all 0.5s ease; height: 245px;  position: absolute; top: 0; right: -193px; z-index: 1;}
.main_kefu dl.icon3 dd a{ float: left;display: block; width: 100%; height: 40px; text-align: center; line-height: 40px; border-top: solid 1px #eee; background-color: #fff;}
.main_kefu dl.icon3 dd a:hover{ background-color: #ff4229; color: #fff;}
.main_kefu dl.icon3 dd a:first-child{ border-top: 0;}
.main_kefu dl.icon4 dd{ height: 48px; padding: 6px 15px; background-color:rgba(0, 0, 0, 0.8); position: absolute; top: 0; right: -261px; color: #fff; font-size: 14px; line-height: 24px; z-index: 1; width: 170px;transition: all 0.5s ease;}

.tips{ display: none;}